Question

我有2个组件，我可以使用react router dom中的Route组件在它们之间进行路由。组件之一在componentDidMount事件（使用axios包）上从虚拟api服务器获取数据，以下是代码：

    componentDidMount() {
    axios.get('/posts')
        .then(response => {
            const posts = response.data.slice(0, 4);
            const updatedPost = posts.map(post => {
                return {
                    ...post,
                    author: 'Max'
                };
            });
            this.setState({ posts: updatedPost });
        })
        .catch(error => {
            console.log(error);
        });
}

错误是，当我从一个组件重定向到另一个组件的速度太快，甚至不是那么快时，我在控制台上收到以下警告：

“警告：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState，replaceState或forceUpdate。这是无操作。

请检查“帖子”组件的代码。”

我该怎么做才能解决此问题？我试图找出： setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op 但我不太了解何时传递裁判以及如何传递裁判。如果有人可以举一个例子来解决这个问题，那就太好了。谢谢！

Answer 1

反应警告有效。在已经有setState的组件上调用unmounted时，应该如何反应反应。正确的处理方式是cancel，如果由于某种原因（例如用户导航）而将组件unmounted设为componentWillUnmount。

以下是官方blog的建议。利用class ExampleComponent extends React.Component { state = { externalData: null, }; componentDidMount() { this._asyncRequest = asyncLoadData().then( externalData => { this._asyncRequest = null; this.setState({externalData}); } ); } componentWillUnmount() { if (this._asyncRequest) { this._asyncRequest.cancel(); } } render() { if (this.state.externalData === null) { // Render loading state ... } else { // Render real UI ... } } }生命周期

init()

它看起来像是Axios supports“可取消”的请求。

Answer 2

我用问题答案解决了这个问题！非常感谢，这是我的代码，效果很好！

const CancelToken = axios.CancelToken;
let cancel;

class Posts extends Component {

    asyncRequest = null;
    state = {
        posts: []
    };

    componentDidMount() {
        this.asyncRequest = axios.get('/posts', {
            cancelToken: new CancelToken(function executor(c) {
                // An executor function receives a cancel function as a parameter
                cancel = c;
            })
        })
            .then(response => {
                const posts = response.data.slice(0, 4);
                const updatedPost = posts.map(post => {
                    return {
                        ...post,
                        author: 'Max'
                    };
                });
                this.setState({ posts: updatedPost });
            })
            .catch(error => {
                console.log(error);
            });
    }

    componentWillUnmount() {
        if (this.asyncRequest) {
            cancel();
        }
    }
}

反应警告：只能更新已安装或正在安装的组件

2 个答案: