如何解决如何在反应中的 axios get 方法中设置其他组件的状态?
我在 React 中使用基于类的组件。我有几个组件命名如下: Blogs,BlogsClient,BlogCard.
当 Blogs
挂载时,我调用 BlogClient
中名为 getBlogContent
的函数以使用 axios
获取数据.
setBlogs = (blogs) => {
this.setState({ "blogs": blogs });
}
componentDidMount() {
getBlogContent(this.setBlogs);
}
getBlogContent 在哪里:
let getBlogContent = (setBlogs) => {
store.set('loaded',false);
axios.get(ADMIN_URL + '/getAllBlogs')
.then(response => {
store.set('loaded',true);
setBlogs(response.data.Response);
})
.catch(error => {
store.set('loaded',true);
store.set('errorMessage',error);
})
}
我能够正确获取数据并更新我的状态。但是如果在 Blogs
或 BlogCard
(在 Blogs
内部调用)中出现任何错误,它会进入 getBlogContent
的 catch 中,而它应该只负责捕获 Axios 错误.我在这里错过了什么?
解决方法
好的,所以如果不知道这些错误就很难判断..
但是,您应该避免在该组件之外设置组件的状态。所以,你的代码会变成:
componentDidMount() {
const blogContent = getBlogContent();
if (blogContent !== 'error'j this.setBlogs(blogContent);
}
let getBlogContent = () => {
store.set('loaded',false);
return axios.get(ADMIN_URL + '/getAllBlogs')
.then(response => {
store.set('loaded',true);
return response.data.Response;
})
.catch(error => {
store.set('loaded',true);
store.set('errorMessage',error);
return 'error';
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。