将数据通过React中的嵌套组件向上传递

Question

[以想法开头；我想我可能需要一个递归组件，但是这超出了我目前使用本机js和React的能力，所以我觉得我现在对React很了解。

问题：

我有一个metafields数组，其中包含具有以下结构的metafield对象：

{
  metafields: [
    { metafield: 
      { namespace: "namespaceVal", 
        key: "keyVal", 
        val: [
          0: "val1", 
          1: "val2", 
          2: "val3" 
        ]
      }
    }, 
    ...
  ]
}

我的代码将metafields映射到卡中，并且每个卡中都包含一个组件<MetafieldInput metafields={metafields['value']} />，并且在该组件中，值数组被映射到输入字段。总的来说，它看起来像：

// App
render() {
  const metafields = this.state.metafields;
  return (
    {metafields.map(metafield) => (
      <MetafieldInputs metafields={metafield['value']} />
    )}
  )
}

//MetafieldInputs
this.state = { metafields: this.props.metafields}

render() {
  const metafields = this.state;
  return (
    {metafields.map((meta, i) => (
      <TextField 
        value={meta}
        changeKey={meta}
        onChange={(val) => {
          this.setState(prevState => {
            return { metafields: prevState.metafields.map((field, j) => {
              if(j === i) { field = val; }
              return field;
            })};
          });
        }}
      />
    ))}
  )
}

到目前为止，所有内容显示正确，我可以更改输入！但是更改一次只发生一次，因为我按了一个键，然后必须单击返回以添加另一个字符。似乎所有内容都被重新渲染，这就是为什么我必须单击回输入以进行其他更改的原因。

我可以以此方式使用组件吗？感觉好像我正在努力嵌套组件，但是我读过的所有内容都说不要嵌套组件。我使这个问题复杂化了吗？我唯一的解决方案是删除React部分并将其带到纯JavaScript。

指导将不胜感激！

Answer 1

您需要在应用程序级别执行onChange。您应该只将onChange函数传递给MetaFieldsInput并在渲染时始终使用this.props.metafields

Answer 2

我的建议是外包onChange处理程序，这样可以使代码的理解更加容易。