Reactjs 如何管理我的子组件阵列'；州？

我是新手，所以请原谅我。我在理解国家，特别是儿童的国家方面遇到了问题

目的：我试图创建一个表单，用户可以附加越来越多的组件——在本例中是图像

发生了什么：用户附加2个或更多图像。用户尝试使用

UploadButton

组件上载图像，但两个图像相同。我认为这与两个孩子共享同一个州有关

问题：如何在不影响其他附加子项的情况下为每个附加子项提供自己的图像

class Page extends Component
  constructor (props) {
    super(props);

    this.state = { 
      id: '', 
      numChildren: 0,
      images: [],
    }
    this.onAddChild = this.onAddChild.bind(this);
  }

  showModal() {
    this.setState({
      numChildren: 0,
      images: [],
    });
  }

  renderModal() 
    const children = [];
    //Here's my array of child components
    for(var i = 0; i < this.state.numChildren; i += 1) {
        children.push(<this.ChildComponent key={i} />);
    }

    return (
      <ReactModal>
        <this.ParentComponent addChild={this.onAddChild}>
          {children}
        </this.ParentComponent>
      </ReactModal>
    )
  }

  onAddChild = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    })
  }

  ParentComponent = (props) => (
    <div>
      {props.children}
      <Button onClick={props.addChild}>Add Item</Button>
    </div>
  );

  ChildComponent = () => (
    <div>
      <UploadButton
        storage="menus"
        value={this.state.images}
        onUploadComplete={uri => this.setState({images: uri})}
      />
    </div>
  );
}

我试图排除与我的问题无关的所有不必要的代码，但是如果我需要显示更多，请告诉我

编辑：这是我的尝试，无效：

//更改了我的子数组以包含新道具
renderModal（）{
const children=[]；
对于（变量i=0；i(
this.props.onImageSelect（uri）}//我的绿色在这里非常明显
onUploadComplete={uri=>this.setState（{images:uri}）}
/> 
//...
);
//将此函数添加到类中
onImageSelect（uri）{
var el=this.state.images.concat（uri）；
这是我的国家({
图片：el
})
}

当您在子/父组件中写入

此.state

时，您实际上正在访问页面的状态。现在，我建议您像这样将孩子的索引传递给孩子

children.push（）

这样每个孩子都能像这样处理自己的形象

ChildComponent = ({index}) => (
    <div>
      <UploadButton
        storage="menus"
        value={this.state.images[index]}
        onUploadComplete={uri => {
          let images = this.state.images.slice()
          images[index] = uri
          this.setState({images})
        }}
      />
    </div>
  );

ChildComponent=（{index}）=>(
{
让images=this.state.images.slice（）
图像[索引]=uri
this.setState（{images}）
}}
/>
);

TLDR您是否考虑过将父级中的所有图像保存在一个数组中，并通过迭代创建子级。@Miro J.我认为在某个位置使用一个图像数组，无论是

构造函数还是
父级组件，都是一个解决方案。我不知道该怎么做：用户单击
UploadButton
，所选图像被放入图像数组，然后遍历数组创建所有子图像。当前，用户在选择图像之前会附加子对象。我听说程序员90%的时间都花在盯着电脑屏幕思考如何实现他们的想法上，而不是打字上。我已经经历了三天了。谷歌“如何从react中的子组件调用父函数”>在子级中创建一个函数，用于在上载完成后将图像传输到父级。父数组最多应有一个“空”元素，它将在子数组中显示上载功能。@Miro J.我正在尝试实现您建议的内容。我感觉部分问题是因为我使用了无状态组件，所以编辑了很多代码。是的！这正是我想要的答案！非常感谢你！
ChildComponent = ({index}) => (
    <div>
      <UploadButton
        storage="menus"
        value={this.state.images[index]}
        onUploadComplete={uri => {
          let images = this.state.images.slice()
          images[index] = uri
          this.setState({images})
        }}
      />
    </div>
  );