Question

我正在尝试根据放入react-dropzone的json文件的内容填充FieldArray组件。

在文档中使用example（因为我的代码结构实际上是相同的）。我的文件将包含成员列表。删除/选择文件后，reducer将更新表单的状态。因此，在我的文件中，键“members”与具有相同名称的FieldArray组件匹配。

逻辑适用于Field组件，但不适用于FieldArray组件。问题是如果我有一个包含3个成员的JSON文件，表单会更新以显示3个成员，但每个成员都没有内容。

将文件放入dropzone时运行的（已编辑）代码：

onDrop(acceptedFiles) {
  this.setState({ files: acceptedFiles });
  acceptedFiles.forEach((file) => {
  const jsonObj = new XMLHttpRequest();
  jsonObj.overrideMimeType('application/json');
  jsonObj.open('GET', file.preview, true);
  jsonObj.onreadystatechange = () => {
    if (jsonObj.readyState === 4 && jsonObj.status===200) {
      const memberJson = JSON.parse(jsonObj.responseText);
      if (!Object.prototype.hasOwnProperty.call(memberJson , 'members')) {
       this.props.onSubmitMembers(memberJson);
    }
  };
  jsonObj.send(null);
});

我的表单构造：

const UploadForm = reduxForm({
  form: 'upload',
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,
  enableReinitialize: true,
  validate,
  initialValues: {
    members: [{}],
    somethingElse: [{}]
  },
})(SimpleForm);

export default connect(
  (state) => ({ initialValues: state.getIn(['upload', 'data']) }),
  { load: loadMembers},
)(UploadForm);

我的初始状态：

const initialState = fromJS({
 data: {
   members: [{}],
   somethingElse: [{}]
  },
  sending: false,
});

在我的Reducer中：

case LOAD_MEMBERS:
      return state.update('data', (data) => data.concat(action.payload));

成员JSON：

{
    "members": [{
            "firstname": "foo",
            "lastname": "bar"
        },

        {
            "firstname": "other",
            "lastname": "other"
        }
    ]
}

FieldArray：https://www.webpackbin.com/bins/-Kf8QRJd0W0YMKBw-PMo

如果不清楚，我可以修改所有代码并将其放在该webpack网站上。

根据上传的

0 个答案: