如何在我的useSelector()挂钩的结果之后运行API调用

Question

我正在尝试在网络API调用中使用来自useSelector()挂钩的一些数据。但是，使用下面的代码，我得到了错误TypeError: cannot read property 'query' of undefined.我知道这是因为查询没有从useSelector((返回然而有没有一种方法可以等待数据然后调用API？

const pageContent = useSelector(getPageContent);
useEffect(() => {
axios
.get('https://www.googleapis.com/youtube/v3/search', {
params: {
key: process.env.API_KEY,
part: 'snippet',
type: 'video',
q: pageContent.data.query,
},
})
.then((res) => res)
.then((data) => console.log(data));
}, []);

Answer 1

您可以将useEffect与pageContent一起用作依赖项，因此无论何时pageContent发生更改，api都将被调用

useEffect(() => {
if(!pageContent){
return;
}
axios
.get('https://www.googleapis.com/youtube/v3/search', { params: {
key: process.env.API_KEY,
part: 'snippet',
type: 'video',
q: pageContent.data.query,
},
})
.then((res) => res)
.then((data) => console.log(data));
}, [pageContent]);