Реагируйте «Превышена максимальная глубина обновления».

Question

У меня есть контейнер, который является дочерним контейнером.Этот дочерний контейнер обрабатывает 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,
    });
};

Я подозреваю, что это очень маленькое исправление, но я не знаю, где яЯ иду не так.

Вещи, которые я пробовал:

1. Измените способ вызова дескриптора, измените его на функцию стрелки, и она не сработала
2. Я удалил одну из инструкций Select ипопытался запустить снова, и это сработало.
3. Я пытался удалить вызов handleChange из одного оператора Select, и он работал нормально.

Также я должен упомянуть: у меня естьcomponentWillReceiveProps функция (не уверен, если это имеет значение)

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

Answer 1

Проблема была не в обработчике handleChange.Очевидно, [Material-UI] https://material -ui.com / (инструмент, который я использую для элементов формы) потребовал, чтобы мы добавляли элемент FormControl над каждым добавлением Select I.Таким образом, компонент должен выглядеть примерно так:

<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 рекурсивно вызывает handleChange для каждого компонента Select внутри элемента управления Form, и, поскольку у меня их было более одного, он шел в цикле.Надеюсь, это поможет.

Answer 2

Проблема onChange={this.handleChange('modelType')}.

Вы не присоединяете событие, вы вызываете метод с этим.

Вы входите в бесконечный цикл из-за этого.this.handleChange('modelType') происходит повторный рендеринг с повторным вызовом this.handleChange('modelType') ... и т. Д.

Прикрепление к событию onChange анонимной функции, которая вызывает handleChange

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

И изменить handleChange Объявление параметров:

handleChange = (name, event) => {}