如何在 Effect Hook 中使用 axios？

Question

在基于类的组件中：

 componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
        this.setState({
            posts: res.data.slice(0, 10)
        });
        console.log(posts);
    })
}

我试过这个：

 const [posts, setPosts] = useState([]);

useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
        setPosts(res.data.slice(0, 10));
        console.log(posts);
    })
});

它创建了一个无限循环。如果我将 []/{} 作为第二个参数 [1][2] 传递，那么它会阻止进一步的调用。但它也阻止了数组更新。

[1] useEffect 中的无限循环

[2] 如何用 React useEffect 只调用一次加载函数

原文由 Mahmudul Haque 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将一个空数组作为第二个参数提供给 useEffect 以表明您只希望效果在初始渲染后运行一次是可行的方法。 console.log(posts); 显示一个空数组的原因是因为 posts 变量仍然引用初始数组，而 setPosts 也是异步的，但是如果在渲染中使用，仍然可以按您的意愿工作。

例子

 const { useState, useEffect } = React;

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setPosts([{ id: 0, content: "foo" }, { id: 1, content: "bar" }]);
      console.log(posts);
    }, 1000);
  }, []);

  return (
    <div>{posts.map(post => <div key={post.id}>{post.content}</div>)}</div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以检查 axios-hooks 是如何实现的。

它非常简单，并使用您提供的配置对象（或 url）来决定何时发出请求，何时不发出请求，如 Tholle 的回答 中所述。

除了允许您在无状态功能组件中使用令人敬畏的 axios 之外，它还支持服务器端渲染，事实证明，钩子使得实现起来非常简单。

免责声明：我是该软件包的作者。

原文由 Simone 发布，翻译遵循 CC BY-SA 4.0 许可协议