无法使用 redux-form、react-apollo 和 graphql 初始化表单数据

Question

我需要从状态初始化表单数据 - 但是因为我有 2 个容器，一个graphql容器和一个redux容器，我不确定该怎么做。我也在使用semantic-ui-react<Form />.

呈现组件时，将显示console.log的 from 操作;但是，表单数据不会加载初始值。你能帮忙吗？

用户编辑组件.js

const UserEditComponent = (props) => {
const { initialValues, loadFormData, handleSubmit, createUser } = props;
// initialize form w/ data - Not Working!
loadFormData(initialValues);
const submitForm = async (data) => {
const result = await createUser(data);
return result;
};
return (
<div id='new-user'>
<Form className='newUserForm' onSubmit={ handleSubmit(submitForm.bind(this)) }>
<h3 className='group-title'>Information</h3>
{
RenderFieldArrays(formGroup1)
}
<Button className='heavy' type='submit' primary>
Continue
</Button>
</Form>
</div>
);
};
UserEditComponent.displayName = 'UserEditComponent';
UserEditComponent.propTypes = {
handleSubmit: React.PropTypes.func,
createUser: React.PropTypes.func.isRequired,
initialValues: React.PropTypes.object,
loadFormData: React.PropTypes.func
};
let InitializeFromStateForm = reduxForm({
form: 'initializeFromState',
enableReinitialize: true
})(UserEditComponent);
InitializeFromStateForm = connect(
state => ({ initialValues: state.overlay.content.props }),
dispatch => ({
loadFormData: data => {
console.log('------ inside loadFormData!');
dispatch({
type: types.LOAD,
payload: data
});
}
})
)(InitializeFromStateForm);
export default InitializeFromStateForm;`

RenderFieldArrays.js

const RenderFieldArrays = (formGroup) => {
return formGroup.map( (val, ind) => {
return (
<FieldArray
key={ ind }
name={ ind.toString() }
formGroup={ val }
component={ RenderFormGroup }
/>
);
});
};
RenderFieldArrays.propTypes = {
formGroup: PropTypes.array.isRequired
};
export default RenderFieldArrays;

用户编辑容器.js

const gqlArgs = {
props: ({ mutate }) => ({
createUser: async function test(data) {
try {
const user = getUser(data);
const result = await mutate(user);
} catch (err) {
console.log('GQL Error: ', err);
}
}
})
};
// ## GraphQL container
const gqlMemberEdit = graphql(
UserEditMutation,
gqlArgs
)(InitializeFromStateForm);

export const UserEditPopup = connect(
state => { ... },
dispatch => { ... }
)(gqlMemberEdit);

reducer_userEdit.js

export const types = Object.freeze({
LOAD: 'LOAD'
});
// Default State
const DEF_STATE = {
firstName: null,
lastName: null
};
export const reducer = (state = DEF_STATE, action) => {
let newState;
switch (action.type) {
case types.LOAD:
console.log('---- inside LOAD! action.payload: ', action.payload);
newState = {
data: {
firstName: 'hello',
lastName: 'test'
}
};
break;
default:
newState = state;
}
return newState;
};
export const loadFormData = data => {
console.log('----- inside loadFormData!');
return {
type: types.LOAD,
payload: data
};
};

Answer 1

使用来自redux-formprops 的initialize()动作，并使用与<Field />的name变量匹配的键传入initialValues对象。

在componentDidMount()中，您可以调用initialize操作，以便初始值在加载时填充表单。