reactjs - 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] Infinite loop in useEffect

[2] How to call loading function with React useEffect only once

Answer 1

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

示例

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>