时间戳

首页 > 解决方案 > 我的 UseEffect 要么无限次调用我的 API 并且我的数据正在显示，要么调用它一次但数据未显示

reactjs - 我的 UseEffect 要么无限次调用我的 API 并且我的数据正在显示，要么调用它一次但数据未显示

问题描述

我正在使用 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();
}, []);

标签： reactjsapiaxiosreact-hooksstrapi

解决方案

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

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

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

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

加载完成时设置为假（无论成功/错误）

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

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]);

推荐阅读