如果我不应该在组件WillUpdate中调用setState，如何更新状态(使用ReactJS）

How do I update the state (using ReactJS) if I should not call setState in componentWillUpdate?

本文关键字：ReactJS 何更新 更新 状态 使用 不应该 组件 WillUpdate setState 调用 如果      更新时间：2023-09-26

当我setState componentWillUpdate时，componentWillUpdate在一个无限循环中运行，不会停止被触发。

这从来没有给我的render机会来反映我的变化。如果我不应该使用componentWillUpdate，如何更改状态？

编辑：我已经有一些理解，setState不应该在componentWillUpdate中调用。我只是困惑我应该做什么作为替代方案。

编辑#2：我从componentWillReceiveProps开始，但是当我的父组件更改状态时，我似乎无法触发此功能。我从父母那里提供这种状态作为我孩子的道具。

首先要做的是检查此方法的官方文档（链接）。在哪里可以读取实际调用函数的时间。

然后阅读常见错误（注意）：

您不能在此方法中使用 this.setState（）。如果需要更新状态以响应 prop 更改，请改用 componentWillReceiveProps。

您更改状态，React 会自动调用componentWillUpdate。

我知道

指南中警告不要这样做，但我不确定我能否看到从componentWillUpdate内部调用setState的问题。没错，它可能会导致无限递归，除非你当然提供该递归的底部（一种突破它的方法）。例如，一种方法可能是检查componentWillUpdate中的第二个（nextState）参数，如果满足某些条件（即递归结束时），则不再调用setState。

举一个最小的例子，假设一个组件根本没有属性，只有两个状态。进一步假设第二段状态是从第一段状态异步获得的。例如，第一段状态可以是提供给 Ajax 调用的某个参数，第二段状态是该调用的结果。所以基本上你调用this.setState来配置参数，然后在componentWillUpdate里面你可以做如下的事情（为了简单起见，我使用 window.setTimeout 作为 Ajax 调用的占位符）：

const ComponentWithAsyncState = React.createClass({
    getInitialState: function() {
        return {
            ajaxParams: '',
            ajaxResult: ''
        };
    },
    setAjaxParams: function(params) {
        this.setState({ajaxParams: params});
    },
    componentWillUpdate: function(_, nextState) {
        if (nextState.ajaxParams!=this.state.ajaxParams)
            window.setTimeout(function imagineThisIsAjax() {
                this.setState({ajaxResult: `result from ${nextState.ajaxParams}`});
            }.bind(this), 2000);
    },

当（例如，通过此组件管理的某些控件）ajaxParams更改时，操作序列将类似于（其中~~>表示异步性）：

setAjaxParams --> this.setState --> componentWillUpdate ~~> imagineThisIsAjax --> this.setState --> componentWillUpdate

即对componentWillUpdate的第二次调用不会导致进一步的this.setState，因此递归将在那里结束。

相关文章：