React中useEffect依赖products导致axios请求无限循环问题求助

问题根因 #

你当前遇到的无限循环完全是因为useEffect依赖项配置错误导致的：

• 你将products状态加入了useEffect的依赖数组，而该useEffect内部又会调用setProducts更新products状态
• 只要products发生变化（包括接口返回赋值、排序操作修改数组引用），就会触发这个依赖products的useEffect重新执行，再次发起请求、更新状态，最终形成死循环

修复方案 #

如果你确实需要这个请求仅在组件初始化时执行一次，直接将useEffect的依赖数组改为空数组[]即可，修改后的代码如下：

const [products, setProducts] = useState([]);

useEffect(() => {
    const getProducts = async () => {
      try {
        const response = await axios.get('/getAllProducts');
        setProducts(response.data);
        // 注意：这里不能直接打印products拿最新值，React状态更新是异步的，要查看最新值可以打印response.data
      } catch (e) {
        console.log(e);
      }
    };
    getProducts();
}, []); // 空依赖代表仅组件首次挂载完成后执行一次

额外说明 #

如果后续你需要在排序规则变更时重新拉取接口数据，不要把products放到依赖数组中，改为将排序相关的状态（比如排序类型sortType、排序方向sortOrder等）加入依赖数组即可，不会触发死循环。

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