为什么useState不触发重新渲染？

Question

我已经初始化了一个数组状态，当我更新它时，我的组件不会重新渲染。以下是一个最低限度的概念证明：

function App() {
  const [numbers, setNumbers] = React.useState([0, 1, 2, 3]);
  console.log("rendering...");
  return (
    <div className="App">
      {numbers.map(number => (
        <p>{number}</p>
      ))}
      <input
        type="text"
        value={numbers[0].toString()}
        onChange={newText => {
          let old = numbers;
          old[0] = 1;
          setNumbers(old);
        }}
      />
    </div>
  );
}

根据这段代码，似乎输入应该包含要开始的数字0，并且无论何时更改，状态也应该更改。在输入中输入“02”后，应用程序组件不会重新渲染。但是，如果我在5秒后执行的onChange函数中添加setTimeout，则表明数字确实已更新。

对为什么组件不更新有什么想法吗？

这是一个带有概念证明的代码沙盒。

Answer 1

其他人已经给出了技术解决方案。对于任何对为什么会发生这种情况感到困惑的人来说，这是因为set某物（）只有当且仅当前一个状态和当前状态不同时才会重新呈现组件。由于javascript中的数组是引用类型，如果您在js中编辑数组的项，它仍然不会更改对原始数组的引用。在js看来，这两个数组是相同的，尽管这些数组中的原始内容是不同的。这就是set某物（）失败检测对旧数组所做的更改的原因。

请注意，如果使用类组件并使用setState（）更新状态，则无论状态是否已更改，组件都将始终更新。因此，您可以将功能组件更改为类组件作为解决方案。或者按照别人提供的答案去做。

Answer 2

你需要复制数字这样let old=[...数字]；

useState仅当值已更改时才更新该值，因此，如果该值为44且变为7，则将更新该值。但它如何知道数组或对象是否已更改。它是通过引用来实现的，所以当你使用让old=numbers时，你只是传递一个引用，而不是创建一个新的引用

Answer 3

您正在调用setNumbers并将它传递给它已经拥有的数组。你已经改变了它的一个值，但它仍然是同一个数组，我怀疑React没有看到任何理由重新渲染，因为状态没有改变；新数组是旧数组。

避免这种情况的一种简单方法是将阵列分散到新阵列中：

setNumbers([...old])