任何人都可以解释一下我吗,刚开始学习 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 不是关键字吗?
使用
previousState
只是一种约定。您可以像这样正确编写更新程序。
setCar((p) => {
return { ...p, color: "blue" };
});
在这种情况下:
(p) => {
return { ...p, color: "blue" };
}
只是一个标准的 javascript 回调函数。我们将一个匿名函数作为参数传递给另一个函数,并在幕后调用它,并将值作为参数传递。
setCar((previousState) => {
return { ...previousState, color: "blue" };
});
我们可以将其分为:
setCar()
和
(previousState) => { return { ...previousState, color: "blue" }; }
wich 是一个匿名函数。 React 调用您的函数并在参数中设置旧状态,因此它不是关键字,它只是您为旧状态指定的名称。