从useSelector（）挂钩获得结果后，如何运行API调用？

Question

我正在尝试使用来自useSelector()钩子的一些数据，这些数据来自网络API调用。但是，使用下面的代码，我得到了错误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]);