使用API get请求获取数据与响应结果数据重复

Question

我正在向后端请求从数据库中获取数据，我在做一些类似的事情：

const loadData = async () => {
const response = await fetch(URL);
const data = await response.json();
setOrdersData(data.data);
};
useEffect(() => {
loadData();
console.log(OrdersData)
}, []);

当我console.log(OrdersData)它console.log6次，因此在渲染数据时，它也渲染了6次，我还试图在useEffect中设置依赖关系，如下所示：

const loadData = async () => {
const response = await fetch(URL);
const data = await response.json();
setOrdersData(data.data);
};
useEffect(() => {
loadData();
setLoading(false)
console.log(OrdersData)
}, [loading]);

但是，当我渲染OrdersData时，它渲染了6次，即使响应结果只有一个对象，我仍然不知道如何不复制数据。

Answer 1

为了防止不必要的渲染，请尝试在loadData中使用useCallback钩子，如下所示：

const loadData = useCallback(async () => {
try {
const response = await fetch(URL);
const data = await response.json();
setOrdersData(data.data);
} catch (err) {
//do something
}
}, [])

请记住导入为钩子，并根据您喜欢的useEffect或useMemo使用dependencies。希望它能起作用，还记得用返回语句卸载useEffect中的副作用