使用 API 获取数据获取请求复制响应结果数据

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.log 6 次因此在渲染数据时它也渲染了 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。 希望它有效，记得用 return 语句卸载 useEffect 中的副作用