Reactjs 在 React 的父级中多次调用子级时从子级获取数据到父级

你的问题没有增加多少上下文，所以我会尽我所能回答它.

您希望将多个信息从N个子对象传递到父对象，并且(我假设)您不能在Parent个状态中创建相同数量的状态，因为这个数字是动态的.您要做的是让一个数组作为父对象中的状态，让每个子对象在该数组上有一个索引，并让它只在该索引处操作数组中的元素.

https://codesandbox.io/s/hardcore-mclean-f8dzmf?file=/src/Parent.jsx个

这是一个简单的演示，说明可以做些什么.我只换了Parent，根本没碰Child.我将留下以下代码:

Parent.jsx个

const Parent = () => {
  const [messages, setMessage] = useState([
    "Hello 1",
    "Hello 2",
    "Hello 3",
    "Hello 4"
  ]); // ⭐(1)⭐
  const chooseMessage = (message, index) => {
    const newMessages = [...messages]; // ⭐(2)⭐
    newMessages[index] = message;
    setMessage(newMessages);
  }; 
  return (
    <div>
      {messages.map((message, index) => (
        <h2 key={index}>{message}</h2>
      ))}
      <!-- ⭐(3)⭐ -->
      <Child key="0" chooseMessage={(message) => chooseMessage(message, 0)} />
      <Child key="1" chooseMessage={(message) => chooseMessage(message, 1)} />
      <Child key="2" chooseMessage={(message) => chooseMessage(message, 2)} />
      <Child key="3" chooseMessage={(message) => chooseMessage(message, 3)} />
    </div>
  );
};

在(1)中，您可以看到状态是一个array.在您的应用程序中，我假设子对象的数量将是动态的，因此从一个空数组开始，随子对象数量的增加向其中添加元素.

在(2)中，您可以看到setState函数有点奇怪.为什么我要做const newMessages = [...messages]，而不是只做const newMessages = messages？这是一种使Reaction对数组中元素的更改做出react 的方法，因为默认情况下，它不会对数组状态的元素的更改做出react ，也不会对数组本身的更改做出react .

在(3)处，您可以看到正在传递的chooseMessage有点不同.因此，出于演示的目的，我只是将子代的数量设置为4，并手动 for each 子代设置索引，并创建了匿名函数来向下传递给子代，因此不需要更改Child中的代码.实际上，我假设您将需要通过某种类型的.map函数动态创建这些子代，就像我对<h2>标记所做的那样.

希望这能帮上忙.