为什么React中useState定义的defaultValue打印结果为空对象？

• React 状态更新的异步特性：setDefaultValue、setCompetitions等状态更新方法是异步批量执行的，调用后不会立即修改当前渲染周期内的状态变量，只会将更新任务加入队列，等下一次组件重渲染时才会生成新的状态值。你在setDefaultValue之后同步打印的defaultValue，仍然是本次渲染周期的初始值{}。
• 直接修改状态的非法操作：useState返回的状态变量是只读的，你直接通过下标赋值competitions[i] = xxx修改原状态数组，属于违反React不可变原则的操作，会导致状态更新异常，甚至React可能因为数组引用未变化跳过重渲染。

首先不要直接修改原状态，创建新数组存储处理后的数据，需要获取最新值时，直接使用你即将存入状态的临时变量即可；如果需要在状态更新后执行逻辑，可新增useEffect监听对应状态变化。

额外提示：你当前给defaultValue设的初始值是空对象，但后续赋值的是赛事的value字段（字符串类型），建议初始值和后续赋值类型保持一致，避免出现不必要的类型bug。

修正后代码如下：

const App = () => {
  const [competitions, setCompetitions] = useState([]);
  const [defaultValue, setDefaultValue] = useState({});

  useEffect(() => {
    axios.get('http://localhost:4000/app/getCompetitions')
      .then(res => res.data)
      .then(res => {
        // 新建数组，不修改原状态
        const newCompetitions = res.map(item => ({
          value: item.name,
          label: item.name,
          id: item._id
        }));
        setCompetitions(newCompetitions);
        const newDefault = newCompetitions[0]?.value ?? {};
        setDefaultValue(newDefault);
        // 直接打印临时变量即可拿到最新值
        console.log(newDefault);
      })
  }, []);

  // 监听defaultValue变化，状态更新后自动触发
  useEffect(() => {
    console.log('defaultValue更新完成，最新值：', defaultValue);
  }, [defaultValue]);
}

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