时间戳

首页 > 解决方案 > 使用 API 获取数据获取请求复制响应结果数据

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

问题描述

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

   const loadData = async () => {
        const response = await fetch(URL);
        const data = await response.json();
        setOrdersData(data.data);
    };

    useEffect(() => {
        loadData();
        console.log(OrdersData)
    }, []);

当我console.log(OrdersData)6console.log次渲染数据时，它也渲染了 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 次时，我仍然无法弄清楚如何不复制数据。

标签： javascriptreactjsreact-nativefetch

解决方案

为了防止不必要的渲染，请尝试在 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 中的副作用

推荐阅读