Ошибка при вызове setState () onChange для выбранного TextField внутри Drawer

Question

У меня есть Drawer Material-UI и внутри него, у меня есть ввод выбора TextField. Я могу нормально открыть раскрывающийся список, но когда я нажимаю на любой параметр, он удаляет содержимое всей страницы и выдает много ошибок в консоли.

Я изучаю React, так что, возможно, это что-то простое.

Я сделал несколько тестов и обнаружил, что он ломается только когда:

1. Я вызываю setState() в функции, вызываемой свойством onChange.
2. Выбор TextField находится внутри компонента Drawer.

Мой код:

import React, { Component } from 'react';

import './styles.scss';

import Drawer from '@material-ui/core/Drawer';

import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';

class Filter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filter_open: true,
      form: {
        city: ''
      },
      cities: [
        {
          id: 1,
          label: 'Lorem'
        },
        {
          id: 2,
          label: 'Ipsum'
        }
      ]
    }
  }

  handleCityChange = (changeEvent) => {
    this.setState({
      form: {
        city: changeEvent.target.value
      }
    });
  }

  render() {
    return (
      <Drawer
        anchor="bottom"
        open={this.state.filter_open}
        transitionDuration={450}
      >
        <div className="Filter">
          <TextField
            id="filled-select-city"
            className="TextField"
            select
            label="Select an option"
            value={this.state.form.city}
            onChange={this.handleCityChange}
            margin="normal"
          >
            {this.state.cities.map(option => (
              <MenuItem key={option.id} value={option.id}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>
        </div>
      </Drawer>
    )
  }
}

export default Filter

Ошибки на консоли:

Answer 1

Единственное, что я вижу, это то, что вы не передали событие методу this.handleCityChange.

попробуйте передать событие в метод следующим образом:

onChange={(e) => {this.handleCityChange(e);}}