如何使用AXIOS的有效钩子？ [英] How to use axios in Effect Hook?

问题描述

在基于类的组件中：

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

推荐答案

将一个空数组作为useEffect的第二个参数提供给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>

这篇关于如何使用AXIOS的有效钩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！