与React-Router一起管理加载条的状态

Question

I have an app in React which uses material-ui's responsive drawer component. Let's call it ResponsiveDrawer. In this component I have a state variable called "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});
    }
    ...

I want to display a LinearProgress component at the top of the page, depending on the loading state variable.

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

Inside ResponsiveDrawer I am also using react router to render some child components.

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

Inside Investments component, I am doing a fetch from an API. What I would like to do, is to set the loading state in the ResponsiveDrawer component to true and then set it back to false upon successful fetch.

So I passed the setLoading function of the ResponsiveDrawer into InvestmentsComponent as props:

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

And then tried to set it to true on componentDidMount()

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

However, when I do this, react goes into infinite loop - I assume that when the state of loading changes, it also reloads the investments component route which then sets the loading state again.

I end up with:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

What could be a potential solution to this conundrum?

Answer 1

我实际上是通过使用另一种方式渲染路线组件来解决此问题的，方法是使用render而不是component prop

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