3

I've got a fairly simple react container component that attempts to call set state in an ajax callback called from componentDidMount. The full error is:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the UserListContainer component.

the order of operations from my console.log are:

render
child-render
componentDidMount
ajax-data
[Big ol Error Message]

I started out using async/await but when I received the error I went back to callbacks with the same result. This is the relevant code:

    export class UserListContainer extends React.Component<any, any>
{

    constructor() {
        super();
        this.state = {
            users: [], request: {}
        };

    }
    //componentDidMount = async () => {
componentWillMount = () => {
        console.log('componentWillMount');
        //var response: Models.IUserQueryResponse = await Api.UserList.get(this.state.request);
        Api.UserList.get(this.state.request).then((response) => {
            console.log('ajax-data');
            if (response.isOk) {
                this.setState({ users: response.data, request: response.state });
            }
        });
    }
    render() {
        console.log('render');
        return <UserList
            request={this.state.request}
            users={this.state.users}
            onEditClick={this.edit}
            onRefresh={this.refresh}
        />;
    }

Any help would be appreciated.

2 Answers 2

1

you cannot set state in componentWillMount because your component could be in a transitioning state.. also it will not trigger a re-rendering. Either use componentWillReceiveProps or componentDidUpdate.

Now that aside your issue is that you are calling setState in the callback from an API request. and the issue with that is you probably have unmounted that component and dont want to setState anymore.

you can fix this with a simple flag

constructor() {
    super();
    this.state = {
        users: [], request: {}
    };
    this.isMounted = false;
}
componentDidMount(){
    this.isMounted = true
}
componentWillUnmount(){
    this.isMounted = false;
}

then in your api request you would do this.

Api.UserList.get(this.state.request).then((response) => {
    console.log('ajax-data');
    if (response.isOk && this.isMounted) {
        this.setState({ users: response.data, request: response.state });
    }
});
6
  • I'll take a look at this shortly, I ripped out isomorphic-fetch and am in the process of replacing it with axios (not sure if that will make a difference, but it has an abort that I've read I should call when unmounting). What causes component to unmount other than navigating away? I added a console.log to every lifecycle event and I only get componentWillUnmount if I navigate away from the page, it's not called before the error happens. May 3, 2017 at 21:08
  • axios is a great library :) to be honest I think you should not setstate from an api request. rather use the store and pass props. you can cancel the request with axios which should work. the error message says that its probably because its unmounted. it could be that you are calling setState somewhere before the component has mounted or while its already in a transition. can you post a jsfiddle simulating the error so I can debug it? May 3, 2017 at 21:11
  • 1
    I haven't made it to stores quite yet, I'm just learning react. I'll see what I can do about the fiddle, but it'll be a bit. -Thanks May 3, 2017 at 21:16
  • componentWillReceiveProps never seems to get called, componentDidUpdate does if I navigate to the page twice but it seems to fire off again every few ms May 3, 2017 at 21:47
  • it seems like it was this componentWillMount = () => as opposed to componentWillMount(), I was trying to recreate the problem from my tutorial for the fiddle and when I copied and pasted this code in, it just worked. May 3, 2017 at 22:31
-1

I think is better to use componentWillMount() instead of componentDidMount() cause you want to load the list and then set the state, not after the component was mounted.

2
  • I gave that a shot, but I'm still getting the error message, that does make sense though, to have the data already there when the component it rendered May 3, 2017 at 19:26
  • 1
    you cannot set state in componentWillMount. facebook.github.io/react/docs/… May 3, 2017 at 21:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.