Question

我在React中有一个使用material-ui响应式抽屉组件的应用程序。我们称之为ResponsiveDrawer。在这个组件中，我有一个名为“loading”的状态变量。

class ResponsiveDrawer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading:false
        }
        this.setLoading = this.setLoading.bind(this);
    }
    setLoading(loading) {
        this.setState({loading:loading});
    }
    ...

我想在页面顶部显示一个LinearProgress组件，具体取决于loading状态变量。

    ...
    render() {
        return (
            <div className={classes.root}>
                {this.state.loading ? <LinearProgress/> : ""} 
                ...

Inside ResponsiveDrawer我也使用react路由器来渲染一些子组件。

                ...
                <main className={classes.content}>
                    <div className={classes.contentWrapper}>
                        <Switch>
                            <Route
                                exact
                                path="/investments"
                                component={InvestmentsComponent}
                            />
                            ...
                        </Switch>
                     </div>
               </main>
          </div>

Inside Investments组件，我正在从API进行提取。我想做的是将ResponsiveDrawer组件中的加载状态设置为true，然后在成功获取后将其设置回false。

所以我将ResponsiveDrawer的setLoading函数作为props传递给InvestmentsComponent：

 InvestmentsComponent = <Investments setLoading={this.setLoading} />

然后尝试在componentDidMount()

上将其设置为true

    componentDidMount() {
        this.props.setLoading(true);
        fetchInvestments(); // sets loading to false upon completion
    }

     fetchInvestments() {
        fetch("/api/investments", {
            credentials: "same-origin",
            headers: {
                "Cache-Control": "no-cache"
            }
        })
            .then(res => {
                if (!res.ok) throw Error(res.status);
                return res.json();
            })
            .then(responseJson => {
                this.props.setLoading(false);
                this.setState({ investments: responseJson });
            })
            .catch(err => {
                console.error("Unable to fetch investments"); // show error message
            });
    }

但是，当我这样做时，反应进入无限循环 - 我假设当loading的状态发生变化时，它还会重新加载投资组件路径，然后再次设置加载状态。

我最终得到了：

超出最大更新深度。组件时可能会发生这种情况反复调用componentWillUpdate中的setState或 componentDidUpdate。 React限制嵌套更新的数量防止无限循环。

这个难题的潜在解决方案是什么？

Answer 1

我实际上是通过使用render代替component prop

以不同的方式呈现路径组件来解决问题

 <Route exact path="/investments" render={InvestmentsComponent} />

管理加载条的状态与react-router反应

1 个答案: