Question

我想做一件简单的事情：检查URL上是否有参数，然后为我的组件设置状态。此状态将确定是否应显示某些HTML代码。

基本上这个虚拟样本可以让你知道我拥有的东西：

class Lalala extends Component {
    constructor(props) {
        super(props);
        this.state = {showStatement : false}

    }
    parseURLParams(urlParams) {
        if (urlParams.indexOf('blabla')> -1) {
          this.setState({
            showStatement: true
          })
        }
    }
    render() {
        const { location } = this.prop
        this.parseURLParams(location.search);
    }
}

因此，正如您所看到的，每次渲染时，它都会调用parseURLParams函数来尝试设置状态，当然，当调用setState时，渲染函数会再次被调用，从而导致无限循环最终在控制台中返回此错误。

你们能告诉我一个更好的方法来设置这种状态吗？一旦这是一个不依赖于事件的事情，我有点困惑。

由于

Answer 1

导致您在protected override DriverResult Display(HeaderPart part, string displayType, dynamic shapeHelper) { return ContentShape("Parts_CategoriesMenu", () => shapeHelper.Parts_CategoriesMenu( MenuItems: this.menuAccessor.GetMenu<NavigationMenuItem>("UserAccount"), ContentPart: part )); } }中使用setState。它将呈现 - ＆gt; setState - ＆gt; render-＆GT; setState - ＆gt;渲染...你应该将render移动到这样的其他生命周期

this.parseURLParams(location.search);

Answer 2

尝试在不同的生命周期挂钩中设置状态，例如componentDidUpdate。此外，如果您想要的道具值在初始渲染中可用，您还需要将其设置为状态：

class Lalala extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showStatement : false,
            showBrokerStatements: props.location && props.location.search && props.location.search.indexOf('blabla')> -1
        }
    }
    componentDidUpdate() {
        this.parseURLParams(this.props.location.search);
    }
    parseURLParams(urlParams) {
        if (urlParams.indexOf('blabla')> -1) {
          this.setState({
            showBrokerStatements: true
          })
        }
    }
    render() {
        const { location } = this.prop
    }
}

Reactjs：未捕获错误：尝试更新状态

2 个答案: