文章摘要

你是否遇到过在React 中使用 Axios 请求数据时，因为状态是异步更新的，导致的请求数据为空。

现在你可以使用 React 18 引入的flushSync来解决这个问题

flushSync 是一个用于同步更新状态的方法。它可以强制 React 在调用它时立即刷新渲染

来看看示例吧！

// 导入 flushSync 和 axios
import React, { useState } from 'react';
import { flushSync } from 'react-dom';
import axios from 'axios';

// 初始化状态
function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 创建一个异步函数 fetchData 来进行数据请求
  const fetchData = async () => {
    setLoading(true);
    setError(null);

    try {
      const response = await axios.get('https://api.example.com/data');

      // 在数据请求成功后，使用 flushSync 包装 setData 调用，状态将立即更新，并触发组件重新渲染
      flushSync(() => {
        setData(response.data);
      });
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {data && <div>{JSON.stringify(data)}</div>}
    </div>
  );
}

export default DataFetchingComponent;

注意：频繁使用 flushSync 可能会影响性能，因为它会强制 React 同步更新，跳过批处理优化。仅在确实需要立即更新状态时使用。