ステートレスコンポーネントのフォームフィールドは、redux-formsおよびreact-nativeを使用して初期化されていません。

Question

私はある値で初期化したい2つのフィールドを持つ基本フォームを持っています。私はinitialValuesをreduxFormに渡していますが、フォームのフィールドには最初にそこに指定された値が表示されません。

ちょっと調べてみると、これが還元型のバグかどうかはまだ分かりません。

const renderInput = ({ input: { onChange, ...restInput}}) => { 
    return <TextInput onChangeText={onChange} {...restInput} /> 
} 

const RegisterLocationForm = ({handleSubmit}) => { 
    return (
    <View> 
     <Text>Location Key:</Text> 
     <Field name="location_key" component={renderInput} /> 
     <Text>Location Secret</Text> 
     <Field name="location_secret" component={renderInput} /> 
     <Button 
     onPress={handleSubmit} 
     title="Register Location" 
     color="#70c000" 
     /> 
    </View> 
) 
} 

RegisterLocationForm.propTypes = { 
    onSubmit: PropTypes.func.isRequired 
} 

RegisterLocationForm = reduxForm({ 
    form: 'registerLocation', 
    initialValues: { location_key: 'A key' , location_secret: 'A secret' } 
})(RegisterLocationForm) 

export default RegisterLocationForm 

In this post彼らはそれらを初期化するために、コンポーネントのライフサイクルを使用することを提案するが、私はステートレスなコンポーネントを使用していますので、私はcomponentDidMountのようなコールバックを使用することはできません。ここで

は私のコンポーネントのコードです。

誰も似たような問題に直面しましたか？私は間違って何をしていますか？私はそれが実際に動作を発見

EDIT

。しかし、私はTDDをやっていて、テストは失敗しています。

const middlewares = [] 
const mockStore = configureStore(middlewares) 

test('renders correctly',() => { 
    tree = renderer.create(
    <Provider store={store}> 
     <RegisterLocationForm onSubmit={() => {} } initialValues={{ 
     location_key: '12345678-1234-1234-1234-123456789012', 
     location_secret: '12345678-1234-1234-1234-123456789012' 
     }} /> 
    </Provider> 
).toJSON() 
    expect(tree).toMatchSnapshot() 
}) 

を、私は手動でスナップショットでの期待値を設定します。ここで失敗したテストがあります。フィールドの値がまだ空であるため、テストは失敗しています。

は、それが初期値で更新されないでしょうか？

Answer 1

通常、この方法で私のredux-form（反応中）のJESTスナップショットテストを作成します。この形式は、私の還元形式の大部分で機能しています。ステートレスコンポーネントについて

、initialStateValuesを除去し、店舗での置き換え： CONSTストア= CREATESTORE（（）=> {}）

import React from 'react' 
import renderer from 'react-test-renderer' 
import RegisterLocationForm from '../RegisterLocationForm/RegisterLocationForm' //Import your redux 
form component 
import { reduxForm } from 'redux-form' 
import { createStore } from 'redux' 
import { Provider } from 'react-redux' 

jest.mock('react-dom') 
const spy = jest.fn() 

const initialStateValues = { 
//Pass your initialStateValues of your redux-form component 
} 

const store = createStore((state) => state, initialStateValues) 

const Decorated = reduxForm({ 
    form: 'testForm', onSubmit: { spy } 
})(RegisterLocationForm) 

const defaultFormValues = { 
//You can pass form initialValues here 
} 

it('RegisterLocationForm renders correctly',() => { 

    const tree = renderer.create(
    <Provider store={store}> 
     <Decorated 
     {...defaultFormValues} 
     /> 
    </Provider> 
).toJSON() 
    expect(tree).toMatchSnapshot() 
})