React点击新增div时DOM不更新，数组类型state修改无效问题

核心问题 #

React的状态更新采用浅比较逻辑判断是否触发重渲染：当你传入的新状态和原状态引用完全相同时，React会认为状态没有发生变化，跳过组件重渲染，因此DOM不会更新。

错误原因分析 #

你代码中const textboxes = textBoxDivs的操作只是复制了原state数组的引用，两个变量指向内存中同一个数组。后续调用push方法是直接修改原数组，再调用setTextBoxDivs时传入的还是原来的数组引用，React无法识别到状态变更，自然不会更新DOM。
你之前用计数器类型state可以正常更新，是因为数值是基本类型，每次传入的都是全新的值，React可以正常检测到变化。

修复方案 #

修改addNewTextBox方法，永远传入全新的数组引用即可，两种常用写法如下：

写法1：展开运算符创建新数组 #

const addNewTextBox = () => {
  const numOfTextBoxDivs = textBoxDivs.length;
  const newTextBox = { id: `div${numOfTextBoxDivs + 1}` };
  // 用展开运算符基于原数组生成全新数组，不修改原state
  setTextBoxDivs([...textBoxDivs, newTextBox]);
};

写法2：函数式更新（更推荐，避免闭包导致的state取值问题） #

const addNewTextBox = () => {
  setTextBoxDivs(prevState => {
    const newTextBox = { id: `div${prevState.length + 1}` };
    return [...prevState, newTextBox];
  });
};

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