React中使用条件设置state时状态未更新，求原因解析

你的问题核心在于React的状态更新是异步的，不是调用setInProgress后立刻就能拿到新值。

看你的代码：

const [inProgress, setInProgress] = useState(value);

useEffect(() => {
  missionState.mission_summary.length > 0 ? setInProgress(true) : setInProgress(false);
  console.log(missionState.mission_summary.length > 0) // false
  console.log(inProgress) // true
});

当missionState.mission_summary.length > 0为false时，你调用了setInProgress(false)，但这个操作不会马上修改inProgress的值。React会把状态更新请求放进队列，等当前的useEffect函数执行完毕、整个渲染周期结束后，才会批量处理队列里的更新，重新渲染组件，此时inProgress才会变成false。

而你在useEffect里直接打印的inProgress，是当前这个渲染周期里的状态值（也就是更新前的旧值），所以会显示true。

另外提两个注意点：

• 你的useEffect没有设置依赖数组，会在每次组件渲染时都执行，容易引发无限循环，建议加上依赖项[missionState.mission_summary]，只在mission_summary变化时触发：

  useEffect(() => {
    setInProgress(missionState.mission_summary.length > 0);
    console.log(missionState.mission_summary.length > 0);
  }, [missionState.mission_summary]);
  

• 如果想查看更新后的inProgress，可以单独加一个监听inProgress的useEffect：

  useEffect(() => {
    console.log('更新后的inProgress:', inProgress);
  }, [inProgress]);
  

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