Максимальная глубина обновления превышена путем добавления значения для выбора элемента

Question

Я сделал небольшое простое приложение с последней версией React и React Router.Он работал, как и ожидалось - это приложение, которое позволяет пользователю выбрать компонент для просмотра и выбрать марку, которая будет применена к компоненту.

Я использую два элемента выбора.Добавление value={props.component} приводит к ошибке:

Превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

<IonSelect
          value={props.component}
          onIonChange={event => props.handleComponentPick(event)}
          interface="popover"
          placeholder="Select One"
        >
          <IonSelectOption value="button">Button</IonSelectOption>
          <IonSelectOption value="card">Card</IonSelectOption>
        </IonSelect>

Я не использую событие change для непосредственного изменения состояния - скорее событие изменяет URL-адрес (используя React Router) и измененныйМаршрут изменяет состояние:

                path="/:component/:brand/"
                render={props => (
                  <DisplayComponent
                    {...props}
                    setBrandandComponentState={this.setBrandandComponentState}
                  />
                )}
              />

Эта функция выполняет только то, что предполагает ее имя:

  setBrandandComponentState = (brand, component) => {
    this.setState({
      brand: brand,
      component: component
    });
  };

Я не уверен, какой код имеет отношение к проблеме, но компонент отображаетсяпо маршруту это:

class DisplayComponent extends Component<any> {
  componentDidMount = () => {
    const match = this.props.match;
    this.props.setBrandandComponentState(
      match.params.brand,
      match.params.component
    );
    document.body.setAttribute("brand", match.params.brand);
  };

  componentDidUpdate = prevProps => {
    if (
      this.props.match.params.brand !== prevProps.match.params.brand ||
      this.props.match.params.component !== prevProps.match.params.component
    ) {
      const match = this.props.match;
      this.props.setBrandandComponentState(
        match.params.brand,
        match.params.component
      );
      document.body.setAttribute("brand", match.params.brand);
    }
  };

  render() {
    switch (this.props.match.params.component) {
      case "button":
        return <Button />;
      case "card":
        return <Card />;
      default:
        return <p>No component selected</p>;
    }
  }
}

Answer 1

Вы устанавливаете свое состояние в componentDidMount, что приведет к повторной визуализации компонента, это бесконечный цикл, следовательно, ошибка.Если вы хотите, чтобы при инициализации ваше состояние было подпоркой, вам следует использовать конструктор (обязательно вызовите super):

class DisplayComponent extends Component<any> {
  constructor(props) {
    super(props);
    const match = this.props.match;
    this.props.setBrandandComponentState(
      match.params.brand,
      match.params.component
    );
    document.body.setAttribute("brand", match.params.brand);
  };