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

【问题标题】：Cannot initialize form data using redux-form, react-apollo, and graphql无法使用 redux-form、react-apollo 和 graphql 初始化表单数据
【发布时间】：2017-10-06 01:23:43
【问题描述】：

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

渲染组件时，会显示console.log的from动作；但是，表单数据未加载初始值。你能帮忙吗？

UserEditComponent.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;

UserEditContainer.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
  };
};

【问题讨论】：

你看到INITIALIZE动作被调度了吗？有什么价值观？您如何在两个不同的组件中从 Redux 状态中提取 initialValues 令人困惑。看来您应该只选择其中一个给connect()。
@ErikR。是的，我看到@@redux-form/INITIALIZE 在redux dev tools 中使用正确的有效负载分派 - 但有效负载是一个与redux-form 在提交时给我的结构不同的对象......我想我需要纠正这个问题。你有其他提示吗？谢谢！
@ErikR.另外，我从UserEditContainer.js 中取出initialValues 并放入UserEditComponent.js，而不是像你建议的那样（我之前从两者中提取initialValues）

标签： reactjs redux graphql redux-form apollo

【解决方案1】：

使用来自redux-form 属性的initialize() 操作并传入一个initialValues 对象，其键与<Field /> 的name 变量匹配。

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

【讨论】：