使用 React 更新从对象数组映射的输入中的道具（或状态）

Question

我有一个对象数组，我正在输出到一种输入形式。这些输入需要更新，呈现的值显示更改。我能够控制密钥和新值，但我收到的错误是 metafields.map 不是函数。

我的代码如下：

class EditMetafields extends React.Component {
  constructor(props) {
    super(props);
    this.state = { metafields: [] }
  }

  componentDidMount() {
    // retrieving data from the db to populate metafields
    metafields = [
      {id: 0, key: "key0", value: "value0"},
      {id: null, key: "keyNull", value: "valueNull"},
      {id: 2, key: "key2", value: "value2"},
    ]

    this.setState({ metafields: metafields });
  }

  render() {
    const { metafields } = this.state;
    const formFields = metafields.map((props) => 
      <TextField 
        key={props.id} 
        label={props.key} 
        id={prop.id} 
        value={props.value} 
        changeKey={props.id} onChange={(val) =>{
          console.log(props.key, val); //returns accurate output i.e. "key0 value0a" when 'a' key pressed
          this.setState({ metafields: { ...this.state.metafields, [props.key]: val } }) //TypeError: metafields.map is not a function after 'a' key pressed
        }
      } />
    );

    return (
     <Page>
       <Form>
         {formFields}
       </Form>
     </Page>
    )
  }
}

当它是包含单个 key/value 对的对象数组时，我能够毫无问题地配对和更改，但现在我必须将 id 和更多附加到对象 React 对 Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

我需要处理包含 id、命名空间、键和值的对象，并将每个对象输出到可以更新的表单中的输入，但我不确定我是否通过分配元字段正确地使用了 React到道具。非常感谢指向相关文章或正确方向的链接！

Answer 1

正如 Brian 提到的，这一行：

this.setState({ metafields: { ...this.state.metafields, [props.key]: val } })

将 metafields 状态变量更改为对象。我认为您正在尝试做的是根据键更新 metafields 数组中元素的值。

为此，您应该使用 map 并使用 setState 的回调变体（因为您依赖于 metafields 的先前状态）：

this.setState(prevState => {
    return { metafields: prevState.metafields.map(metafield => {
        if (metafield.key === props.key) {
            metafield.value = val;
        }
        return metafield;
    })};
});

此代码将使用新值更新 metafields 数组中的正确元素。

使用 React 更新从对象数组映射的输入中的道具（或状态）

Updating Props (or State) in Inputs Mapped from Object Array with React

arrays

mapping

onchange

object

reactjs