Question

我使用最新版本的React和React Router制作了一个小型的简单应用程序。它按预期工作-它的样式指南应用程序使用户可以选择要查看的组件并选择要应用于该组件的品牌。

我正在使用两个选择元素。添加value={props.component}会导致错误：

已超过最大更新深度。当一个组件发生这种情况重复调用componentWillUpdate内的setState或 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中设置状态，这将导致您的组件重新渲染，这是一个无限循环，因此会出现错误。如果要在初始化时将状态设置为props，则应使用构造器（确保调用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);
  };

通过向选择元素添加值来超过最大更新深度

1 个答案: