reactjs - 在单击按钮时 react 添加和删除组件

Question

我是 React 的新手。在这里，我试图通过单击 +/- 按钮来添加/删除“计时器”组件。单击“+”时效果很好，但单击“-”时效果不佳。我认为每次设置状态时，组件都会重新呈现。但这里它不会在单击“-”按钮时呈现。

1. 这里可能出了什么问题？
2. 也欢迎任何更好的方法来做同样的事情。

function App() {
  var [timers, setTimers] = useState([]);
  var [count, setCount] = useState(0);

  const addTimer = () => {
    setCount(count + 1);
    timers.push(count);
    setTimers(timers);
    console.log(timers); //[0]
  };

  const removeTimer = () => {
    timers.pop();
    setTimers(timers);
    console.log(timers); //[]
  };

  return (
    <div>
      <button className="button" onClick={addTimer}>
        +
      </button>

      <button className="button" onClick={removeTimer}>
        -
      </button>

      <div>
        {timers.map((t) => (
          <Timer key={t} />
        ))}
      </div>
    </div>
  );
}

Answer 1

问题是 React 只会在状态改变时重新渲染。它通过进行浅层比较来检查该事实。因此，对于对象(或数组，如您的情况)，即使您正在更改对象的内容，对象引用 保持不变。因为 timers.pop() 不会创建新数组。它修改当前数组。

React 会做类似的事情:old array === new array ? 并且返回为 true，因为它是相同的数组/对象引用。

PS:您的 (+) 按钮之所以有效，是因为您还执行了 setCount(count+1)。顺便说一句，您应该将其更改为 setCount((prevState) => prevState + 1);

当您的新状态取决于您的上一个状态时，我建议您始终使用这种形式的 setState 调用:

setState((prevState) => {
  // READ AND USE OLD prevState
  // RETURN BRAND NEW newState
});

你可以这样做:

const addTimer = () => {
  setCount((prevState) => prevState + 1);
  setTimers((prevState) => {
    const newTimers = Array.from(prevState);  // CREATING A NEW ARRAY OBJECT
    timers.push(count);
    return newTimers;  
  });
};

const removeTimer = () => {
  setTimers((prevState) => {
    const newTimers = Array.from(prevState);  // CREATING A NEW ARRAY OBJECT
    newTimers.pop();
    return newTimers;  
  });
};