Question

每当点击添加按钮时，我都会尝试更新 cars 数组。我看到新对象已添加到 updatedCars 数组，但是当我尝试使用它设置状态时，cars 状态不会更新。

即使在数组中添加新对象后，我仍然看到初始状态。

export default function App() {
  const [cars, setCars] = useState([{ name: "Audi", type: "sedan" }]);
  
  const handleAdd = () => {
    const newCar = { name: "Benz", type: "sedan" };
    const updatedCars = [...cars, newCar];
    console.log("updatedCars", updatedCars);
    setCars(updatedCars);
    console.log("result", cars);
  };
  
  return (
    <div className="App">
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

我使用 CodeSandbox 创建了一个工作示例。有人可以帮忙吗？

Answer 1

setCars 是异步方法，不能在cars

之后立即获取setCars()的更新值

setCars(updatedCars);
console.log(cars); //This will console old value of `cars`

您应该使用 useEffect 并添加一个 cars 依赖项来检查更新的值。

useEffect(() => {
  console.log(cars);
}, [cars]);

使用 React 更新功能组件中的数组状态

1 个答案: