ReactJS首次保存后获取数据异常：需两次点击的原因与解决

Hey, I've run into this exact issue before! Let's break down why this is happening and how to fix it.

问题原因 #

React的useState更新是异步且批量处理的。当你调用setCars([...cars, car])时，React并不会立刻更新cars这个状态变量——它会把这次更新加入到待处理的更新队列中，等当前事件循环结束后再批量执行更新。所以在addCar函数里，你紧接着调用的console.log(cars)，拿到的还是更新前的旧状态值，这就是为什么第一次点击看不到新添加的车，第二次点击时，上一次的更新已经完成，才能看到之前添加的数据。

另外，你的代码里还有个小bug：清空car状态的时候写了setCar({ car: "", color: "" })，这里应该是name而不是car，不然输入框的name字段不会被清空哦。

解决方法 #

有两种常用的方式可以解决这个问题：

方法1：直接使用新创建的状态值

既然setCars是基于当前cars生成新数组，那你可以先把新数组存下来，既用来更新状态，也用来打印：

const addCar = e => {
  e.preventDefault();
  const newCars = [...cars, car];
  setCars(newCars);
  setCar({ name: "", color: "" }); // 修正字段名错误
  console.log(newCars); // 直接打印新创建的数组，肯定是最新的
};

方法2：用useEffect监听状态变化

如果你需要在cars状态真正更新完成后执行某些操作（比如打印、发请求等），可以使用useEffect钩子，把cars作为依赖项，当它变化时触发回调：

import React, { useState, useEffect } from "react";
const App = () => {
  const [cars, setCars] = useState([]);
  const [car, setCar] = useState({ name: "", color: "" });

  // 监听cars状态变化，更新完成后打印
  useEffect(() => {
    console.log("最新的cars列表:", cars);
  }, [cars]); // 依赖项为cars，仅当cars变化时执行

  const handleChange = e => {
    setCar({ ...car, [e.target.name]: e.target.value });
  };

  const addCar = e => {
    e.preventDefault();
    setCars([...cars, car]);
    setCar({ name: "", color: "" }); // 修正字段名错误
  };

  return (
    <div className="car">
      <form onSubmit={addCar}>
        <input value={car.name} onChange={handleChange} name="name" placeholder="add car name" />
        <input value={car.color} onChange={handleChange} name="color" placeholder="add car color" />
        <button type="submit">Add a car</button>
      </form>
      {/* 可以把列表渲染出来，直观看到添加结果 */}
      <ul>
        {cars.map((item, index) => (
          <li key={index}>{item.name} - {item.color}</li>
        ))}
      </ul>
    </div>
  );
};
export default App;

这样不管是哪种方式，都能准确获取到最新的cars状态啦。

内容的提问来源于stack exchange，提问作者Asking