如何在React的useEffect中清除状态变量并初始化加载新数据？

React的useState setter是异步操作，且本身不返回Promise，所以没法用await等待状态更新完成。你当前的代码里，setData([])之后立刻调用fetchData，如果fetchData内部直接调用setData覆盖值，最终结果可能没问题，但如果fetchData依赖当前data的状态，就会出现逻辑错误。

给你几个可行的实现方案：

• 方案一：把清空逻辑整合到数据获取函数中（推荐）
  如果fetchData是你自己维护的函数，直接把清空数据的步骤放到函数内部，保证执行顺序：

  const [data, setData] = useState([]);
  
  const fetchData = async () => {
    // 先清空数据
    setData([]);
    // 再请求新数据
    const response = await fetch('/your-api-url');
    const newData = await response.json();
    // 更新为新数据
    setData(newData);
  };
  
  useEffect(() => {
    fetchData();
  }, []);
  

• 方案二：监听状态变化触发数据获取
  如果fetchData无法修改，可以通过额外的状态标记控制流程，等待清空完成后再执行获取：

  const [data, setData] = useState([]);
  const [isClearing, setIsClearing] = useState(true);
  
  useEffect(() => {
    if (isClearing) {
      setData([]);
      setIsClearing(false);
    } else {
      // 此时data已完成清空，执行数据获取
      const loadNewData = async () => {
        const response = await fetch('/your-api-url');
        const newData = await response.json();
        setData(newData);
      };
      loadNewData();
    }
  }, [isClearing]);
  

• 方案三：利用宏任务延迟执行（应急用）
  借助setTimeout把fetchData放到宏任务队列，等待状态更新完成后再执行：

  const [data, setData] = useState([]);
  const isFirstLoad = useRef(true);
  
  useEffect(() => {
    if (isFirstLoad.current) {
      setData([]);
      isFirstLoad.current = false;
      // 延迟执行，等待状态更新生效
      setTimeout(() => {
        fetchData();
      }, 0);
    }
  }, []);
  

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