如何在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]使用中的无限循环

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

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>

Answer 2

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

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

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

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