问响应“超过最大更新深度”。
EN

Stack Overflow用户

提问于 2019-02-22 12:45:24

回答 2查看 544关注 0票数 0

我有一个容器，它是一个子容器。这个子容器处理states，它还从父容器接收一些props。我有两个select语句，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
        });
    }
}

javascript

reactjs

material-ui

jsx

回答 2

Stack Overflow用户

发布于 2019-02-22 13:22:29

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

不是附加一个事件，而是用它调用一个方法。

正因为如此，你进入了一个无限循环。this.handleChange('modelType')发生重呈现，再次调用this.handleChange('modelType')...etc。

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

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

并更改handleChange参数声明：

handleChange = (name, event) => {}

票数 0

Stack Overflow用户

发布于 2019-02-25 06:05:07

问题不在于handleChange侦听器。显然，Material-UI (我为表单元素使用的工具)要求我们在我添加的每个选择之上添加一个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>