axios调用给无限循环答案

【问题标题】：Axios call gives infinite loopaxios调用给无限循环
【发布时间】：2020-07-10 20:06:37
【问题描述】：

我需要获取一些数据并设置状态，但它给了我无限循环，我不知道如何解决这个问题。

我的 Routes.tsx 中的示例：

// get all posts
    useEffect(() => {
        Axios.get('/api/posts', config)
            .then(res => setAllPosts(res.data))
            .catch(err => console.log(err))
    }, [config]);

如果我不依赖'config'，它只会在刷新时显示结果，但它不会给我无限循环。

这是我的项目：https://github.com/marinavrataric/social_network

【问题讨论】：

标签： javascript reactjs axios

【解决方案1】：

尝试使用 useStata[] 和 useEffect[]

   const [data, setData] = useState({ hits: [] });
     
      useEffect(async () => {
        const result = await axios.get('/api/posts', config)
            .then(res => setAllPosts(res.data))
            .catch(err => console.log(err))
     
        setData(result);
      }, []);
     
      return (
        <ul>
          {data.posts.map(item => (
// stuff
          ))}
        </ul>
      );

【讨论】：

【解决方案2】：

当您在 useEffect 中调用 API 并更新 useEffect 中的状态时，每次渲染组件时都会调用没有依赖关系的 useEffect，所以这里是循环：

** 调用useEffect > 调用API> 使用setState更新状态> 因为状态是更新，调用useEffect **

所以你需要为 useEffect 添加一个不会被 setState 更改的依赖项。然后，每当依赖项的值发生变化时，都会调用 API。

顺便说一句，最好不要在useEffect中实现API调用。相反，您应该尝试使用 readux 和 thunk。

【讨论】：

那么我应该使用哪个依赖项？
这取决于用例。如果您想在第一次加载时调用 API，那么您可以使用 redux 和 thunk。如果不是，那么如果您想在某个状态更新后调用 api，而不是 allPost，请将其用作依赖项