React状态更新未按预期执行，点击后始终显示WAIT状态求助

问题根源 #

1. setState异步批量更新特性：React在同步代码块中会批量合并setState调用，你连续执行setState("LOAD")和setState("WAIT")，React会直接应用最后一次的状态设置，导致中间的LOAD状态从未被渲染。
2. await setState无效：setState本身不返回Promise，所以即使加了async/await，也无法等待状态更新完成。
3. API请求未异步等待：如果props.apiFetch是异步操作，同步调用会在状态更新完成前执行，且之后立即将状态改回WAIT，进一步掩盖了LOAD状态。

修复方案 #

方案一：异步等待API请求完成（推荐）

确保props.apiFetch返回Promise，然后在状态设置为LOAD后，等待API请求结束再改回WAIT：

function MyComponent(props){
  const [state, setState] = useState("WAIT")
  
  async function run(){
    setState("LOAD");
    // 等待API请求完成，apiFetch必须返回Promise
    await props.apiFetch();
    setState("WAIT");
  }
  
  return(<h1 onClick={run}>{state}</h1>)
}

如果apiFetch是基于回调的旧写法，先封装为Promise：

// 封装回调式API为Promise
const fetchWithPromise = () => {
  return new Promise((resolve, reject) => {
    props.apiFetch((error, result) => {
      error ? reject(error) : resolve(result);
    });
  });
};
// 然后在run中调用await fetchWithPromise()

方案二：用useEffect监听状态触发API请求

如果需要确保LOAD状态渲染后再执行API请求，可通过状态标记触发副作用：

function MyComponent(props){
  const [state, setState] = useState("WAIT")
  const [isFetching, setIsFetching] = useState(false)
  
  function run(){
    setState("LOAD");
    setIsFetching(true);
  }
  
  useEffect(() => {
    if (!isFetching) return;
    
    const executeFetch = async () => {
      await props.apiFetch();
      setState("WAIT");
      setIsFetching(false);
    };
    
    executeFetch();
  }, [isFetching, props.apiFetch])
  
  return(<h1 onClick={run}>{state}</h1>)
}

关键注意点 #

• 避免在同步代码中连续调用setState修改不同状态，React会批量合并更新。
• setState不支持await，若需等待状态更新生效，使用useEffect监听状态变化。
• 异步操作必须返回Promise才能用await等待完成，否则需自行封装。

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