React 在使用扩展运算符更改状态时渲染，但在传递数组本身时不渲染

Question

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

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

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

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

这是什么原因造成的？

Answer 1

你设置newNumber为 equal phoneNumber。这意味着newNumber是对 的引用phoneNumber。当你流行时，newNumber你就流行了phoneNumber。然后，您实际上将状态设置回phoneNumber。尽管该值已更改，但它仍然是相同的引用，因此 React 假设它不需要重新渲染。

当您展开数组时，您正在创建一个新数组（它在内存中具有新的引用），因此反应会重新渲染组件。

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