Javascript 向选择元素添加值超出了最大更新深度

我用最新版本的React和React路由器制作了一个简单的小应用程序。这是一个styleguide应用程序，允许用户选择要查看的组件，并选择要应用于组件的品牌

我使用两个select元素。添加

value={props.component}

会导致错误：

超过最大更新深度。当一个组件 在componentWillUpdate或 组件更新。React将嵌套更新的数量限制为 防止无限循环

我不确定什么代码与问题相关，但管线显示的组件是：

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>;
    }
  }
}

类DisplayComponent扩展组件{
componentDidMount=（）=>{
常量匹配=this.props.match；
this.props.setBrandComponentState(
match.params.brand，
match.params.component
);
document.body.setAttribute（“brand”，match.params.brand）；
};
componentDidUpdate=prevProps=>{
如果(
this.props.match.params.brand！==prevProps.match.params.brand||
this.props.match.params.component！==prevProps.match.params.component
) {
常量匹配=this.props.match；
this.props.setBrandComponentState(
match.params.brand，
match.params.component
);
document.body.setAttribute（“brand”，match.params.brand）；
}
};
render（）{
开关（this.props.match.params.component）{
案例“按钮”：
返回；
案例“卡”：
返回；
违约：
返回未选择任何组件
；
}
}
}

您正在componentDidMount中设置状态，这将导致组件重新渲染，这是一个无限循环，因此会出现错误。如果要在初始化时将状态设置为props，则应使用constructor（确保调用super）：

类DisplayComponent扩展组件{
建造师（道具）{
超级（道具）；
常量匹配=this.props.match；
this.props.setBrandComponentState(
match.params.brand，
match.params.component
);
document.body.setAttribute（“brand”，match.params.brand）；
};

您正在componentDidMount中设置状态，这将导致组件重新渲染，这是一个无限循环，因此会出现错误。如果您想在初始化时将状态设置为props，则应使用构造函数（确保调用super）：

类DisplayComponent扩展组件{
建造师（道具）{
超级（道具）；
常量匹配=this.props.match；
this.props.setBrandComponentState(
match.params.brand，
match.params.component
);
document.body.setAttribute（“brand”，match.params.brand）；
};

我想你这里指的是componentDidUpdate。在componentDidMount中调用setState不会触发无限循环。将逻辑移到构造函数中而不是

componentDidMount

并没有解决问题。我可以理解问题发生的原因。我不理解的是如何根据URL设置状态没有发生此问题。您想使用状态做什么？我看不出它在哪里使用，渲染只是使用道具。您不应该跟踪值或处理URL更改，这是react router的工作。URL更改应由路由器检测，它应该将您的路由与URL匹配并渲染组件您不想。您是否像这样使用它？看起来您正在尝试为响应路由器句柄的逻辑编写代码。我认为您在这里的意思是componentDidUpdate。在componentDidMount中调用setState不会触发无限循环。将逻辑移到构造函数中而不是

componentDidMount

并没有解决我可以解决的问题了解问题发生的原因。我不明白的是，如何根据URL设置状态，而不发生此问题。您想使用状态做什么？我看不出它在哪里使用，渲染只是使用道具。您不应该跟踪值或处理URL更改，这是react router的工作。路由器应检测到URL更改，它应将您的路由与URL匹配，并呈现所需的组件。您是否像这样使用它？看起来您正试图为响应路由器句柄的逻辑编写代码。

                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>;
    }
  }
}

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);
  };