reactjs - React 在使用扩展运算符更改状态时呈现，但在传递数组本身时不呈现

Question

我遇到了一个问题，即通过传入数组更改状态后 React 不会呈现，尽管状态已成功更新：

const [phoneNumber, setPhoneNumber] = useState([])
...
const newNumber = phoneNumber
newNumber.pop()
setPhoneNumber(newNumber)

但是，在使用扩展运算符传递 newNumber 后，应用程序按预期重新呈现：

const newNumber = phoneNumber
newNumber.pop()
setPhoneNumber([...newNumber])

这是什么原因造成的？

标签： reactjs

Answer 1

你设置newNumber为 equal phoneNumber。这意味着newNumber是对的引用phoneNumber。当你弹出时，newNumber你正在弹出phoneNumber。然后，您基本上将状态设置回phoneNumber. 尽管值已更改，但它仍然是相同的引用，因此 react 假定它不需要重新渲染。

当你传播数组时，你正在创建一个新数组（它在内存中有一个新的引用），因此 react 会重新渲染组件。

这是一种反模式，您不应该phoneNumber像这样直接改变状态值。相反，您应该创建一个新值（例如，当您传播它时）并用您的新值更新状态。