微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在反应中的 axios get 方法中设置其他组件的状态?

如何解决如何在反应中的 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);
    })
}

我能够正确获取数据并更新我的状态。但是如果在 BlogsBlogCard(在 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 举报,一经查实,本站将立刻删除。