我的 UseEffect 要么无限期地调用我的 API 并且我的数据正在显示，要么调用它一次但数据没有显示

Question

我正在使用 Axios“get”请求检索数据，但问题是，如果我将函数 fetchResult() 放在 UseEffect() 的依赖项中，它会在我的 console.log 中显示我的数据，并且在我的 DataGrid 组件中，但调用我的 API 无限，或者如果我将我的依赖项数组设为空，它会调用我的 API 一次（我想要的）但是出于我不知道我的原因console.log 是空的，我的 DataGrid 也是空的，我有机会在 1000 上看到我的数据，当我这样的时候。

const [clients, setClients] = useState([]);
const [rows, setRows] = useState([]);
const [loading, setLoading] = useState(false);

function fetchClients() {
  if (loading === false) {
    axios
      .get(API_URL_CLIENTS + "?users_permissions_user.email=" + USER_KEY_EMAIL)
      .then((response) => {
        if (response.status === 200) {
          setClients(response.data);
          let test;
          console.log(clients);
          test = clients.map((client) => {
            return {
              id: client.id,
              col1: client.nom,
              col2: client.prenom,
              col3: client.mail,
              col4: client.telephone,
            };
          });
          setRows(test);
        }
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        setLoading(true);
      });
  }
  setLoading(false);
}

useEffect(() => {
  fetchClients();
}, []);

Answer 1

我认为您的问题至少部分是由您在被调用函数中设置和检查加载 true/false 引起的。

为什么要在 axios 调用完成时而不是之前将“setLoading”设置为 true？我认为原因是您在执行 axios 调用时正在显示微调器？

我可能会做类似下面的事情。请注意，我做了一些假设：

loading 应该在执行 axios 调用之前设置为 true

加载完成时设置为false（不管success/error）

如果客户端数组已填充，您不想再次发出请求

const [clients, setClients] = useState([]);
const [rows, setRows] = useState([]);
const [loading, setLoading] = useState(false);

function fetchClients() {
    setLoading(true);
    axios
        .get(API_URL_CLIENTS + "?users_permissions_user.email=" + USER_KEY_EMAIL)
        .then((response) => {
            if (response.status === 200) {
                setClients(response.data);
                let test;
                console.log(clients);
                test = clients.map((client) => {
                    return {
                        id: client.id,
                        col1: client.nom,
                        col2: client.prenom,
                        col3: client.mail,
                        col4: client.telephone,
                    };
                });
                setRows(test);
            }
        })
        .catch((error) => {
            console.log(error);
        })
        .finally(() => {
            setLoading(false);
        });
}

useEffect(() => {
    if (!loading && clients.length === 0) {
        fetchClients();
    };
}, [loading, clients]);

我的 UseEffect 要么无限期地调用我的 API 并且我的数据正在显示，要么调用它一次但数据没有显示

My UseEffect either calls an infinite time my API and my data is showing or calls it once but the data is not showing

api

reactjs

strapi

axios

react-hooks