我在點擊「新增元件」按鈕時，在陣列中新增了一個React元件，並渲染了該陣列。每個元件透過將其作為屬性傳遞給計數鉤子來進行渲染。
問題在於，一旦元件被加入到陣列並渲染出來，即使我透過按鈕增加計數，計數鉤子也會更新，但是從陣列中渲染的元件不會更新。當我再次點擊「新增元件」按鈕時，新的元件將會以更新的鉤子渲染出來。但是之前的組件不會隨著增加而更新。
import React, { useState } from 'react';
import Component from './Components/Component';
function App() {
const [comp, setComp] = useState([]);
const [count, setCount] = useState(0);
const addComp = ()=>{
setComp(prevState=>{
return([...prevState,<Component key={comp.length} count={count}></Component>])
})
}
const increment = ()=>{
setCount(prevState=>prevState+1)
}
return (
<>
<button onClick={addComp}>添加组件</button>
<button onClick={increment}>增加</button>
{comp}
</>
)
}
# export default App;
import React from 'react'
export default function Component(props) {
return (
<div>{props.count}</div>
)
} 
useState() hook實際上建議儲存原始類型或簡單物件。將元件儲存在其中是一個很酷的想法，但從效能角度來看，這對React來說確實是一個沉重的負擔。
更好的解決方案是使用原始類型的值，並在渲染時將這些值傳遞給map。以下是一個很好的範例：
import React, { useState } from 'react'; import Component from './Components/Component'; function App() { const [comp, setComp] = useState([]); const [count, setCount] = useState(0); const addComp = () => { setComp(prevState=>[...prevState, count]) } const increment = () => { setCount(prevState=>prevState+1) } return ( <> <button onClick={addComp}>Add Component</button> <button onClick={increment}>Increment</button> {comp.map((c,index) => <Component key={index} count={c}></Component>)} </> ) } # export default App;