Question

我有一个容器，它是一个子容器。该子容器处理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
        });
    }
}

Answer 1

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

您没有附加事件，而是使用该方法来调用方法。

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

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

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

并更改handleChange参数声明：

handleChange = (name, event) => {}

Answer 2

问题不在于handleChange侦听器。显然，[Material-UI] https://material-ui.com/（我用于表单元素的工具）要求我们在我添加的每个Select上方添加一个FormControl元素。因此该组件应如下所示。

var env = "prod";
function config(env) {
  if (env == "prod") {
    url = "url_api_prod";
    token_api = "eyJhbGciOiJSUzI1NiJ9.eyJyb2xl";
  } else {
    url = "utl_api_dev";
    token_api = "eyJhbGciOiJSUzI1NiJ9.eyJyb2xlcyI6";
 }
 url_api = url + "get-action";
 $result = new Array();
 $result['url_api'] = url_api;
 $result['token_api'] = token_api;
 return $result;
}

我犯的错误是我有一个FormControl，里面有两个Select元素。他们网站上未正确记录此特定内容。

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

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

2 个答案: