React中点击按钮添加/移除组件异常问题排查及优化方案咨询

嘿，我来帮你拆解下这个问题～

为啥点击“-”按钮没反应？ #

核心问题出在你直接修改了React state的原数组，违反了React state的不可变性原则：

• React判断state是否变化是做浅比较的，你用timers.pop()直接修改了原数组，然后把同一个数组引用传给setTimers，React会觉得“前后state是同一个东西，没必要重渲染”，所以组件没更新。
• 顺带提一句，你的addTimer里也有个隐藏问题：setCount是异步更新的，你在setCount(count + 1)后直接用count，拿到的其实是更新前的旧值，这次刚好第一次运行是0没出问题，但逻辑上是不严谨的。

修复代码&更优实现 #

我们要通过创建新数组的方式更新state，让React能检测到变化，同时优化不必要的状态：

基础修复版 #

function App() {
  const [timers, setTimers] = useState([]);
  const [count, setCount] = useState(0);
  
  const addTimer = () => {
    // 用函数式更新count，确保拿到最新的prev值
    setCount(prevCount => {
      // 创建新数组，把新的count值加进去
      setTimers(prevTimers => [...prevTimers, prevCount]);
      return prevCount + 1;
    });
  };
  
  const removeTimer = () => {
    // 用slice返回新数组（截取到倒数第二个元素），不修改原数组
    if (timers.length > 0) {
      setTimers(prevTimers => prevTimers.slice(0, -1));
    }
  };
  
  return (
    <div>
      <button className="button" onClick={addTimer}> + </button>
      <button className="button" onClick={removeTimer}> - </button>
      <div>
        {timers.map((t) => (
          <Timer key={t} />
        ))}
      </div>
    </div>
  );
}

更优简化版（去掉多余的count状态） #

其实count和timers的长度是强关联的，完全可以不用单独维护这个状态，直接用数组长度生成唯一key：

function App() {
  const [timers, setTimers] = useState([]);
  
  const addTimer = () => {
    // 用prevTimers的长度作为新timer的标识，同时生成新数组
    setTimers(prevTimers => [...prevTimers, prevTimers.length]);
  };
  
  const removeTimer = () => {
    if (timers.length === 0) return;
    // 同样用slice返回新数组
    setTimers(prevTimers => prevTimers.slice(0, -1));
  };
  
  return (
    <div>
      <button className="button" onClick={addTimer}> + </button>
      <button className="button" onClick={removeTimer}> - </button>
      <div>
        {timers.map((t) => (
          <Timer key={t} />
        ))}
      </div>
    </div>
  );
}

关键知识点提醒 #

• React state是不可变的：永远不要直接修改state对象/数组，要通过生成新对象/数组的方式更新，比如扩展运算符...、slice()、filter()这些返回新数组的方法。
• 当更新state依赖于之前的state时，尽量用函数式更新（比如setTimers(prev => ...)），这样能确保拿到最新的state值，避免异步更新带来的问题。

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