反应“超过最大更新深度。”答案

【问题标题】：React "Maximum update depth exceeded."反应“超过最大更新深度。”
【发布时间】：2019-07-17 00:11:46
【问题描述】：

我有一个容器，它是一个子容器。这个子容器处理states，它还从父容器接收一些props。我有两个选择语句 onChange 在子容器中设置 state。出于某种原因，setState() 导致容器重新渲染。奇怪的是render() 和我的setState() 代码只被调用一次。（我添加了调试器来检查）。请在下面找到我的选择组合框代码：

                <Select
                    native
                    name="evidenceNode"
                    value={nodeType}
                    onChange={this.handleChange('nodeType')}
                    className={classes.textField}
                >
                    <option />
                    {NODE_TYPE.map(function (item, i) {
                        return <option key={i} value={item}>{item}</option>
                    })}
                </Select>

                <Select
                    native
                    name="modelType"
                    value={modelType}
                    onChange={this.handleChange('modelType')}
                    className={classes.textField}
                >
                    <option />
                    {MODEL_TYPE.map(function (item, i) {
                        return <option key={i} value={item}>{item}</option>
                    })}
                </Select>

这是我的 handleChange 函数：

handleChange = name => event => {
    this.setState({
        [name]: event.target.value,
    });
};

我怀疑这是一个非常小的修复，但我不知道我哪里出错了。

我尝试过的事情：

将我调用句柄更改的方式更改为箭头函数，但它不起作用
我删除了其中一条 Select 语句并尝试再次运行，它成功了。
我尝试从 Select 语句之一中删除 handleChange 调用，它工作正常。

我还要提一下：我有一个componentWillReceiveProps 函数（不确定是否重要）

componentWillReceiveProps(nextProps, nextContext) {
    if(nextProps.selectedNode !== this.state.selectedNode){
        this.setState({
            selectedNode: nextProps.selectedNode
        });
    }
}

【问题讨论】：

您能告诉我们您在显示子容器和父容器时到底要做什么吗？
正如@davmich 指出的那样，需要更多上下文，尤其是componentWillReceiveProps 的影响（因为我认为这可能是导致问题的原因）

标签： javascript reactjs material-ui jsx

【解决方案1】：

问题是onChange={this.handleChange('modelType')}。

你不是在附加一个事件，你是在调用一个方法。

因此，您将进入无限循环。 this.handleChange('modelType') 发生重新渲染，再次调用 this.handleChange('modelType')...等

在onChange 事件上附加一个匿名函数，该函数调用handleChange

onChange={e => this.handleChange('modelType', e)}

并更改handleChange参数声明：

handleChange = (name, event) => {}

【讨论】：

差不多，还是要传事件
正如我在问题中提到的，我已经尝试使用箭头功能（就像你建议的那样）来处理 handleChange，但它并没有帮助我。

【解决方案2】：

问题不在于 handleChange 监听器。显然 [Material-UI]https://material-ui.com/（我用于表单元素的工具）要求我们在我添加的每个 Select 上方添加一个 FormControl 元素。所以组件应该看起来像这样。

<FormControl
                // className={classes.formControl}
            >
                <Select
                    native
                    name="nodeType"
                    value={nodeType}
                    onChange={this.handleChange('nodeType')}
                    className={classes.textField}
                    inputProps={{
                        name: 'nodeType',
                        id: 'nodeType'
                    }}
                >
                    <option/>
                    {NODE_TYPE.map(function (item, i) {
                        return <option key={i} value={item}>{item}</option>
                    })}
                </Select>
            </FormControl>

我犯的错误是我有一个 FormControl，它里面有两个 Select 元素。这个特殊的事情没有在他们的网站上正确记录。

我认为 Material-UI 会在 Form 控件内的每个 Select 组件上递归调用 handleChange，因为我有多个组件，所以它进入了循环。我希望这会有所帮助。

【讨论】：