当父级从数组中渲染子级时更新子级prop

Question

我有一个名为components的状态变量，在挂载父组件时，我将组件推入其中。

const [components, setComponents] = useState([]);
const [data, setData] = useState(0);

const addComponent = () => {
  const array = [...components];
  array.push(<ChildComponent data={data} />);
  setComponents(array);
};

useEffect(() => {
  addComponent();
}, []);

然后，当我要渲染此components数组时，我返回以下内容

return (
  <div className="App">
    {components}
    <button onClick={() => setData(100)>Update</button>
  </div>
);

问题是，如果我通过单击按钮更新状态，则新的data状态变量将不会作为prop传递，因为事实是数组包含已经使用静态值创建的组件实例。 / p>

如何解决此问题？