React 应用不断发送连续的 HTTP 请求

Question

我有一个页面显示从 MongoDb 到 API 获取的数据，在此页面中，您可以修改数据，然后页面将再次呈现以显示新数据。 但是检查.network 请求我注意到我的 React 应用程序发送了无限数量的请求，这显然减慢了一切。 我读到这是由这段代码引起的：

useEffect(() => {
    fetchData();
}, [users]);

我还读到我必须清空 useEffect 的依赖项数组，但是如果我这样做，如果数据发生变化（例如在数据库中插入新记录之后），页面将不会重新呈现。 这是我用来从数据库中获取数据的 function：

const [users, setUsers] = useState([]);
async function fetchData() {
    const res = await fetch("http://localhost:8000/users/");
    if (res.status === 401) {
        console.log(res.json);
    } else {
        setUsers(await res.json());
    }
}

我怎样才能解决这个问题？ 谢谢。

Answer 1

您创建了一个无限循环：

fetchData调用setUsers来设置users 。 该效果对users的更改做出反应，并再次调用fetchData 。 ♾️

我不知道您的确切用例，但一种解决方案是仅在您的应用程序中发生实际用户交互使您想要获取新数据时才调用fetchData 。