React中如何使用setState从数组末尾单个移除元素？删除按钮点击后界面不更新问题解析

嘿，这个问题我太熟悉啦！咱们先聊聊为啥你的删除按钮点了没反应，再给你说正确的实现方式～

问题原因 #

React的state是不可变的——你不能直接修改原state对象/数组，必须创建一个新的副本，再通过setState更新。你代码里的nu.pop()是直接修改了原state数组，而且根本没调用setnu来通知React状态变了！

那为啥点添加按钮后元素会消失呢？因为点击添加时，你用了[...nu, "add"]创建了新数组，此时React会读取已经被pop()修改过的原数组，生成新的数组并更新状态，这才触发了重渲染，你才看到元素消失。

正确实现方法 #

核心思路：基于原state创建新数组，再用setnu更新，这里推荐用函数式更新（因为它能确保拿到最新的state值，避免闭包导致的旧state问题）。

方法1：用slice创建新数组（最简洁） #

slice(0, -1)会返回原数组从开头到倒数第二个元素的新数组，完美实现移除最后一项：

function Test() { 
  const [nu, setnu] = useState([]); 
  const delet = () => { 
    // 函数式更新，获取最新的prevNu状态
    setnu(prevNu => prevNu.slice(0, -1));
  }; 
  return ( 
    <div> 
      <button onClick={() => setnu([...nu, "add"])}>Add Item</button> 
      <button onClick={delet}>Delete Last Item</button> 
      <h1> 
        {nu.map((d, index) => ( 
          <span key={index}> {d}, </span> 
        ))}{" "} 
      </h1> 
    </div>
  );
}

方法2：复制数组后再修改 #

先复制原数组，再对副本执行pop()，最后更新state：

const delet = () => { 
  const newNu = [...nu]; // 复制原数组
  newNu.pop(); // 移除最后一项
  setnu(newNu); // 更新状态
};

不过这种方法如果遇到异步更新场景，可能会拿到旧的state，所以还是函数式更新更稳妥。

小提醒 #

你原来的map渲染里没有加key属性，这在React里是不规范的，会导致性能问题和渲染异常，我在示例里加上了key={index}（如果有唯一id的话，用id当key更好）。

总结 #

永远记住：不要直接修改React的state变量，必须通过setState传入新的状态值（新对象/新数组），这样React才能检测到状态变化，及时更新界面～

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