React，在useState中困惑

Question

任何人都可以解释一下我吗，刚开始学习 React，我对这段代码中的一件事感到困惑：

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red",
  });

  const updateColor = () => {
    setCar((previousState) => {
      return { ...previousState, color: "blue" };
    });
  };

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button type="button" onClick={updateColor}>
        Blue
      </button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Car />);

previousState ，如果我们只调用 setCar({color: "blue"})，这将从我们的状态中删除品牌、型号和年份， 所以 previousState 将它们连接起来，但是 previousState 如何访问品牌、型号和年份？他们什么时候被认为是他的？

previousState 不是关键字吗？

Answer 1

使用

previousState

只是一种约定。您可以像这样正确编写更新程序。

setCar((p) => {
      return { ...p, color: "blue" };
    });

在这种情况下：

(p) => {
      return { ...p, color: "blue" };
    }

只是一个标准的 javascript 回调函数。我们将一个匿名函数作为参数传递给另一个函数，并在幕后调用它，并将值作为参数传递。

Answer 2

    setCar((previousState) => {
      return { ...previousState, color: "blue" };
    });

我们可以将其分为：

setCar()

和

(previousState) => { return { ...previousState, color: "blue" }; }

wich 是一个匿名函数。 React 调用您的函数并在参数中设置旧状态，因此它不是关键字，它只是您为旧状态指定的名称。