React钩子替换旧状态

Question

我正在学习有关在反应钩子和我正在经历的例子由academind，

那里的作者提到过这样的事情

当您使用React Hooks设置新状态时（即在我们的示例中通过setCart），旧状态将始终被替换！

与以下示例：

import React, { useState } from 'react'

const Shop = props => {
  const [cart, setCart] = useState([])
  const cartHandler = () => {
    setCart(['A Book'])
  }
  return <button onClick={cartHandler}>Add to Cart</button>
}

我无法理解这一点。

在带有状态的类中，如果执行setState，它也会替换旧的状态，因此作者在这里试图表示什么？

在本文的后面，是这样的

如果它是一个对象，请记住，React在设置它时不会将您的旧状态与新状态合并。您将始终覆盖旧状态，因此可能需要您进行任何合并！

这听起来与我们在类baed组件中执行的setState非常相似

Answer 1

当您调用setState（）时，React将您提供的对象合并到当前状态。

使用useState更新时，状态变量总是替换它而不是合并它。

我将尝试用一个示例来解释：

state = {
    name: "Michael",
    surname: "Jackson"
}

this.setState({
    name: "Bill"
})

在这里，在setState之后，姓氏不会丢失其值（因为setState合并了），所以state如下所示：

{
   name: "Bill",
   surname: "Jackson"
}

但是如果我们用钩子来做：

setUser({
  name: "Bill"
})

姓氏丢失了，所以状态是这样的：

{
  name: "Bill"
}

为了保留姓氏，我们可以使用传播运算符复制旧状态。

setUser({
  ...user,
  name: "Bill"
});

一个完整的例子：

function App() {
  const initialState = { name: "Michael", surname: "Jackson" };

  const [user, setUser] = useState(initialState);

  const handleClickWrong = () => {
    setUser({
      name: "Bill"
    });
  };

  const handleClickCorrect = () => {
    setUser({
      ...user,
      name: "Bill"
    });
  };

  const handleClickReset = () => {
    setUser(initialState);
  };

  return (
    <div className="App">
      <button onClick={handleClickWrong}>Change name (wrong)</button>
      <button onClick={handleClickCorrect}>Change name (correct)</button>
      <button onClick={handleClickReset}>Change name (reset state)</button>
      <hr />
      {JSON.stringify(user)}
    </div>
  );
}

代码框：

https://codesandbox.io/s/hook-not-merging-state-cqj2g