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