反应componentDidMount（）初始化状态

Question

Working on a small project in React, and I'm using Axios to grab information from an API that is tested working. The problem is when I pull in the data and try to update the component state, the values coming in from the API aren't getting filled into the state to be rendered in the component.

I've been trying to get the data in the state like so:

  componentDidMount() {
    this.state.databases.forEach(d => {
      axios.get(`http://localhost:3204/customer/${d}/count`).then(value => {
        this.setState({ counts: this.state.counts.push(value.data) });
      });
    });
    console.log(this.state);
  }

a previous version was written like so:

componentDidMount() {
    let internalCounts = [];
    this.state.databases.forEach(d => {
        axios.get(`http://localhost:3204/customer/${d}/count`).then(value => {
            internalCounts.push(value.data);
        });
    });
    this.setState({count: internalCounts});
}

Both situations end up with the same result. The state is never really updated with the new count array. I have the suspicion that this is due to the async nature of Axios and setState .

What would be a simple, effective way to get these two to stop racing each other?

Answer 1

In the first version you are correct that it is due to the async nature of the service. You are logging the output, but this is happening before the service has resolved.

In the second (previous) example you are setting the state before it resolves. I would recommend the following approach, creating an array of the promises then waiting for all of them to resolve before you update state:

 componentDidMount() { const promises = []; this.state.databases.forEach(d => { promises.push(axios.get(`http://localhost:3204/customer/${d}/count`)); }); Promise.all(promises).then(results => { const internalCounts = []; results.map(result => { internalCounts.push(result.data); }); this.setState({count: internalCounts}); }) } 

Answer 2

Don't use console.log immediately after setting the state since it is asynchronous. Do it with a callback to setState .

this.setState({...}, () => console.log(...))

or inspect your state in your render method with console.log

Also, rather than doing it forEach , try to make all the request in one time with Promise.all if this suits you.

componentDidMount() {
    const promiseArray = this.state.databases.map( d =>
      axios.get(`http://localhost:3204/${d}/count`)
    )
    Promise.all( promiseArray )
      .then( ( results ) => {
        const data = results.map( result => result.data);
        this.setState( prevState => ({
          counts: [ ...prevState.counts, ...data]
        }))
      })
  }

Answer 3

A few problems with your code:

1. Array.prototype.push(value.data) returns the new length, not the new array. So this.setState({ counts: this.state.counts.push(value.data) }); is making state.counts into a number value this.state.counts.length + 1 , which is probably not desired.
2. If you want to print out the new state, the console.log(this.state); should be put into the callback param of setState() .
3. Your previous version did not await for the axios call before setState . You got the idea right.

Answer 4

The issues was I was attempting to mutate state. (I've been horrible with immutable data.... so something I'll have to get used to.)

My solution code is as follows:

componentDidMount(){
    this.state.databases.forEach(d => {
        axios.get(`http://localhost:3204/${d}/count`).then(value => {
            this.setState(prevState => ({
                counts: [...prevState.counts, value.data]
            }));
         });
    });
}