javascript - 使用 axios react useEffect

Question

下面是一段代码，用于通过 axios 从 url 获取数据，

import React, { useState, setEffect, useEffect } from 'react';
import axios from "axios";
import LoadingPage from "./LoadingPage";
import Posts from "./Posts";

const url = "https://api-post*****";

function App() {
    const [posts, setPosts] = useState([]);
    
    const fetchPost = async() => {
        try {
            const response = await axios(url);
            return response.data;
        } catch (error) {
            console.error(error);
        }
    };
    
    let data = fetchPost();
    setPosts(data);
    
    return (
        <main>
            <div className="title">
                <h2> Users Posts </h2>
                {posts.length
                ? <Posts posts={posts} />
                : <Loading posts={posts} />
                }
            </div>
        </main>
    );
}

export default App;

但是，它得到了错误

uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite

问题 1:这怎么可能是重新渲染次数过多，没有循环什么的？

要解决此错误，我们可以使用以下更改:

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

  const fetchPost = async () => {
    try {
      const response = await axios(url);
      setPosts(response.data);
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(()=> {
    fetchPost();
  }, [posts])

问题 2:useEffect 如何避免过多调用？

问题 3:我总是将 React hooks 视为 web socket 通信等。如果是这样的话？

Answer 1

当您调用setPosts时，组件将再次渲染，并再次获取数据，此时您使用数据设置状态，强制进行新的渲染以获取数据......等等。

通过使用useEffect，您可以获取数据，并设置状态一次 when the component is first rendered使用空的依赖项数组。

useEffect(() => {
  // Fetch the data
  setposts(data);
}, []);

您可能不想像在 this useEffect 中观看 posts (您可以有很多)，就像您在更新了示例，因为您可能会遇到同样的问题。