Multiple set state within multiple api call inside componentDidMount in ReactJS

Question

I am new in React and trying to call multiple api call within componentDidMount function.

My code is

componentDidMount() {

        Promise.all([
            axios.get(<url1>),
            axios.get(<url2>)
            ]).then(([res1, res2]) => {
            // call setState here
            const users =  res1.data.users;
            this.setState({ users: users});
            const banks  =  res2.data.banks;
            this.setState({ banks: banks});
            console.log("Users")
            console.log(users) // It works
            console.log("Banks")
            console.log(banks) // It works
        })

    }

render() {
        console.log(this.state.users.length) // Gives length
        console.log(this.state.banks.length) // Gives undefined
        return (
            <div className='popup'></div>
        )
}

The problem is inside render function the second state banks length is undefined.

How can I do multiple setstate inside componentDidMount.

Any help is highly appreciated.

Update: Resolved The mistake was

constructor(props) {
    super(props);
    this.state = {
        users: [],
        //MISSING BANKS array
    }
}

can you try: `this.setState({ users: users, banks: banks});` instead of two times `setState` — Daniel, Nov 10 '19 at 10:14

Jon Miles · Accepted Answer · 2019-11-10T10:31:32.610

1

You should set state in a single update, updating both values at the same time. Otherwise you are instructing React to initiate two renders, the first would contain users value and an undefined value for banks (depending on your initial state declaration). This render would be quickly followed by a second pass, in which both state values users and banks would be defined.

The below example should work as required, in a single render.

Promise.all([
  axios.get(<url1>),
  axios.get(<url2>)
]).then(([res1, res2]) => {
  // call setState here
  const users = res1.data.users;
  const banks = res2.data.banks;
  this.setState({ users, banks });
});

On the other hand, if for some strange requirement you actually want two sequential renders you can use setState's done callback; example below.

this.setState({ users }, () => {
  this.setState({ banks });
});

This will ensure the first render is complete before requesting a new render via setState.

edited Nov 10 '19 at 10:31

answered Nov 10 '19 at 10:19

Jon Miles

9,605
11
46
66

Maybe there should be a check in the render function as well. Like this.state.banks && this.state.banks.length. If he uses mutliple set states instead of combining one that's probably the reason. – Trisma Nov 10 '19 at 10:27
1

@Trisma I would suggest it's better to use a default state which contains a valid (empty) structure and this will avoid having ugly conditional logic in render methods. – Jon Miles Nov 10 '19 at 10:29
That's indeed a better way – Trisma Nov 10 '19 at 10:30
Not necessarily react initiates two renders, please check here: https://stackoverflow.com/questions/33613728/what-happens-when-using-this-setstate-multiple-times-in-react-component and – SuleymanSah Nov 10 '19 at 10:32
@JonathanMiles Tried both ways but still undefined for banks. – Prithviraj Mitra Nov 10 '19 at 10:33
@SuleymanSah As per the referred answer, wouldn't this be considered an AJAX event handler and therefore not batched. – Jon Miles Nov 10 '19 at 10:35
@PrithvirajMitra Are you sure that banks is a valid Array object, could you response be bad? – Jon Miles Nov 10 '19 at 10:36
Yes I am quite sure the response is valid array object. I can see in console within axios call. It's the setState which is messing around. – Prithviraj Mitra Nov 10 '19 at 10:37
@PrithvirajMitra Can you put a jsfiddle together to recreate the issue? Use mock resolved promises – Jon Miles Nov 10 '19 at 10:38
@JonathanMiles I will try. – Prithviraj Mitra Nov 10 '19 at 10:39
Sorry guys my mistake. I didn't initialize the bank array under constructor. So stupid I am. Please vote me negative, Sorry. – Prithviraj Mitra Nov 10 '19 at 10:50
Updated my original post. – Prithviraj Mitra Nov 10 '19 at 10:51

Multiple set state within multiple api call inside componentDidMount in ReactJS

1 Answers1