Question

如何使用 useMemo 与外部 API？

2021-05-22

12855

reactjs react-hooks react-table react-table-v7 react-usememo

我正在使用 react-table 库进行过滤和分页。我使用 Node 从自定义 API 请求数据，并使用 react-table 中的 useTable 钩子对其进行渲染。 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
    .
    .

有人能帮我解决这个问题吗？提前谢谢！

Answer 1

您正在记住 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");
    });
}, []);

Answer 2

您已定义承诺但未返回它，因此代码不会等待承诺解决。尝试使用 async await 语法，这更容易可视化流程。

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

Answer 3

您在 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 状态变量。