React组件中点击Add to List按钮无法添加新列表项的原因

核心问题：直接修改React State数组，未传递新引用触发重渲染 #

React状态更新依赖不可变操作，直接修改原state数组不会触发组件重渲染，具体问题点：

1. liValues.push({name:"Six"}) 是直接修改原state数组的引用，React通过引用变化检测状态更新，原数组引用未变，组件不会重新渲染。
2. liValues.concat({name:"Six"}) 会返回新数组，但未将新数组赋值给变量，操作无效。
3. 调用up(liValues)时传递的仍是原数组引用，React判定状态无变化，不触发重渲染。

修复后的代码 #

function SuperList(props) {
  const liVals = [{name:"One"}, {name:"Two"}, {name:"Three"}, {name:"Four"}, {name:"Five"}];
  const [liValues, up] = useState(liVals);
  
  function AddToList() {
      // 用扩展运算符创建新数组，添加新元素
      const newLiValues = [...liValues, {name:"Six"}];
      // 也可以用concat方式：const newLiValues = liValues.concat({name:"Six"});
      up(newLiValues);
  }

  return (<>
    <ul>
      {liValues.map((l) => <li>{l.name}</li>)}
      </ul>
      <button onClick={AddToList}>Add to List</button>
    </>
  );
} 

createRoot(document.getElementById('root')).render(
      <>
      <SuperList/>
      </>
); 

关键要点 #

• 禁止直接修改React的state变量，必须通过创建新数组/对象完成状态更新。
• 使用扩展运算符[...原数组, 新元素]或concat方法生成新数组，再传递给状态更新函数。
• 状态更新函数接收新引用后，React才会检测到状态变化，触发组件重渲染以展示新列表项。

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