React中如何使用useState Hook从另一个数组获取元素更新当前状态数组

现有代码的问题 #

• 违反React状态不可变原则：你直接对numbers调用push修改原状态数组，属于非法变更状态，React无法检测到本次变更。
• 状态更新未触发重渲染：修改原数组后你把同一个数组引用传给setNumbers，React浅比较会判定状态未发生变化，不会触发组件重渲染，页面不会更新内容。

正确实现方式 #

全量覆盖状态（用nums内容替换现有numbers内容） #

function App() {
  const nums = [1, 2, 3, 4, 5]
  const [numbers, setNumbers] = useState([])

  useEffect(() => {
    // 生成全新数组传入setter，不修改原状态
    setNumbers([...nums])
  }, [])

  return (
    <>
      {numbers.map(num => 
        <p key={num}>{num}</p>  
      )}
    </>
  );
}
export default App;

追加内容到状态末尾（保留numbers原有内容，新增nums的元素） #

如果你需要保留numbers的原有内容，只追加nums的元素，用函数式更新拿到上一次的状态值处理：

useEffect(() => {
  setNumbers(prevState => [...prevState, ...nums])
}, [])

额外优化建议 #

• 不要使用Math.random()作为key属性值，每次重渲染都会生成新的key，导致组件不必要的卸载重建，你的场景下元素值唯一，可以直接用num作为key。
• 不需要额外判断numbers.length再执行map，空数组调用map会直接返回空内容，不会触发报错。

内容的提问来源于stack exchange，提问作者DeveloperRuwaid