如何解决如何使用带有外部 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
}
},[]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。