Redux表单未格式化发布数据和[object Object]问题

时间:2018-11-26 16:42:04

标签: javascript reactjs react-redux redux-form

我有两个互相导致的问题。我用initialValue数据填充了两个字段,然后可以将另一个字段推到数组中。当我尝试从以下位置修改initialValue结构时,就会出现问题:

  initialValues: {
    rockSingers: [ "Axl Rose", "Brian Johnson"]
  }

收件人:

  initialValues: {
    rockSingers: [{ singer: "Axl Rose" }, { singer: "Brian Johnson" }]
  }

第一个问题是该字段现在返回[object Object]。提交表单后,将显示正确的json格式,直到出现第二个问题为止……添加与initialValue数据格式不同的新值时,例如

{
  "rockSingers": [
    {
      "singer": "Axl Rose"
    },
    {
      "singer": "Brian Johnson"
    },
    "Tom Rudge"
  ]
}

这是密码框-https://codesandbox.io/s/8kzw0pw408

3 个答案:

答案 0 :(得分:1)

尝试一下:

const renderRockSingers = ({ fields }) => (
      <div>
        <h3>Rock Singers:</h3>
        {fields.map((rockSinger, index) => (
          <div>
            <Field
              name={rockSinger}
              format={value => value.singer}
              parse={value => ({ singer: value })}
              key={index}
              component="input"
            />
          </div>
        ))}
        <button type="button" onClick={() => fields.push({ singer: '' })}>
          Add more
        </button>
      </div>
    );

答案 1 :(得分:1)

修改renderRockSingers,以便获取对象而不是字符串。

const renderRockSingers = ({ fields }) => (
  <div>
    <h3>Rock Singers:</h3>
    {fields.map((rockSinger) => (
      <div>
        <Field name={`${rockSinger}.singer`} key="index" component="input" />
      </div>
    ))}
    <button type="button" onClick={() => fields.push()}>
      Add more
    </button>
  </div>
);

有关FieldArray组件的更多信息,这里:fieldarrays

答案 2 :(得分:1)

<Field
  name={rockSinger}
  key={index}
  component="input"
  format={(value, name) => (value !== undefined ? value.singer : "")}
  normalize={value => ({ singer: value })}
/>

代码沙箱:https://codesandbox.io/s/7m1p9600y0