反应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”后，App组件不会重新呈现。但是，如果我在5秒钟后执行的onChange函数中添加setTimeout，则表明数字确实已更新。

关于组件为何不更新的任何想法？

这是带有概念证明的CodeSandbox。

Answer 1

你可以像这样改变状态

const [state, setState] = ({})
setState({...state})

或者如果你的状态是数组你可以这样改变

const [state, setState] = ([])
setState([...state])

Answer 2

你需要numbers像这样复制let old = [...numbers];

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

Answer 3

其他人已经给出了技术方案。对于为什么会发生这种情况感到困惑的任何人，是因为 setSomething() 仅当且仅当前一个状态和当前状态不同时才重新呈现组件。由于 javascript 中的数组是引用类型，如果你在 js 中编辑一个数组的某一项，它仍然不会改变对原始数组的引用。在 js 眼中，这两个数组是一样的，尽管这两个数组里面的原始内容是不同的。这就是 setSomething() 无法检测对旧数组所做更改的原因。

请注意，如果您使用类组件并使用 setState() 更新状态，那么无论状态是否已更改，组件都将始终更新。因此，您可以将功能组件更改为类组件作为解决方案。或者按照其他人提供的答案进行操作。

Answer 4

您正在调用setNumbers并传递它已经拥有的数组。您已经更改了它的值之一，但是它仍然是相同的数组，我怀疑React并没有发现任何重新渲染的理由，因为状态没有改变。新数组是旧数组。

避免这种情况的一种简单方法是将数组散布到新数组中：

setNumbers([...old])