如何使用带有外部 API 的 useMemo？

问题描述

我正在使用 react-table 库进行过滤和分页。我正在使用 Node 从自定义 API 请求数据，并使用 useTable 中的 react-table 钩子呈现它。 react-table 的文档说应该记住表数据，所以我使用 useMemo 钩子。代码如图所示：

  const data = React.useMemo(() => {
    axios.get("/custom/api/endpoint")
      .then((res) => {
        return res.data;   //Returns an array of objects
      })
      .catch((err) => {
        console.log("err");
      });
  },[]);

但是，我收到以下错误：

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at accessRowsForColumn (useTable.js:591)
    at useTable.js:195
    .
    .

谁能帮我解决这个问题？提前致谢！

解决方法

您正在记住 axios 创建的承诺。而是使用 useEffect() 进行调用，并设置状态。除非你再次设置状态，否则数据不会改变：

const [data,setData] = useState([]); // use an empty array as initial value

useEffect(() => {
  axios.get("/custom/api/endpoint")
    .then((res) => {
      setData(res.data); // set the state
    })
    .catch((err) => {
      console.log("err");
    });
},[]);

,

您在 useMemo 调用中使用了这个箭头函数。

() => {
    axios.get("/custom/api/endpoint")
      .then((res) => {
        return res.data;   //Returns an array of objects
      })
      .catch((err) => {
        console.log("err");
      });
  }

它返回 undefined。这是因为 axios.get 返回一个 Promise 并且您没有将它分配给任何东西，并且您的箭​​头函数隐式返回 undefined，因为它没有明确的 return 语句。

试试这个：

const [data,setData] = useState([]);

useEffect(() => {
  axios.get("/custom/api/endpoint")
    .then((res) => {
      setData(res.data);
    })
    .catch((err) => {
      console.log("err");
    });
},[]);

这里的 useEffect 是在组件的初始渲染之后调用的，它调用了 axios.get。它是一个异步函数，因此 useEffect 调用在调用后立即返回。当 axios.get 异步调用成功时，它会调用 then 调用中的箭头函数，该函数将响应中的数据分配给 data 状态变量。

,

您已经定义了一个承诺并且没有返回它，所以代码不会等待承诺解决。尝试使用 async await 语法，这样更容易可视化流程。

  const data = React.useMemo(async () => {
    
      try {
        const res = await axios.get("/custom/api/endpoint") 
        return res.data
      } catch(err) {
        throw err
      }
 
  },[]);