我在点击“添加组件”按钮时，在数组中添加了一个React组件，并渲染了该数组。每个组件通过将其作为属性传递给计数钩子来进行渲染。
问题在于，一旦组件被添加到数组并渲染出来，即使我通过按钮增加计数，计数钩子也会更新，但是从数组中渲染的组件不会更新。当我再次点击“添加组件”按钮时，新的组件将会以更新的钩子渲染出来。但是之前的组件不会随着增加而更新。
1
978import 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>
)
} 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
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;