React.js 数据未保存到 state 变量

Question

I'm trying to render my workersData and ordersData however after fetching the APIs, ordersData can be rendered by using map, but when I try to render workersData it doesn't do anything. I checked with console.log and seems it does get populated with the right data but when I try to map it, it won't render it. I'm fairly new to React so any help is appreciated.

class FetchData extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ordersData: [],
            workersDatas: [],
        };
    }

    componentDidMount() {
        fetch("https://www.hatchways.io/api/assessment/work_orders")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    ordersData: data.orders
            }, () => { 
                    console.log(this.state.ordersData)
                    this.state.ordersData.map(order => {
                        console.log(this.state.ordersData)
                        fetch(`https://www.hatchways.io/api/assessment/workers/${order.workerId}`)
                            .then(result => result.json())
                            .then(data2 => {
                                this.state.workersDatas.push(data2);
                            })
                        console.log(this.state.workersDatas)
                    })
                });
            })
            .catch(err => {
                console.log(err)
            });
    }

    render() {
        return (
            <div>
                <ul>
                  {this.state.workersDatas.map(order => (
                    <li>
                      hello
                    </li>
                  ))}
                </ul>
            </div>
        );
    }
}

ReactDOM.render(<FetchData/>, document.getElementById('root'));

Answer 1

it's because, this.setState() may be update the state asynchronously, so don't get the state as soon as you update the state. this document is maybe helpful for understanding the state.

Answer 2

this.state.workersDatas.push(data2) is a no-no.

Do Not Modify State Directly . It will not re-render your components. This could be why you see the correct data in your console, but not in your component.

To make your fetch data flow easier to read, break it down into chunks instead of trying to nest multiple callbacks. Fetch the ordersData and set the state. Then use that state to fetch the workersData, and set it using the spread operator.

  componentDidMount() {
    fetch("https://www.hatchways.io/api/assessment/work_orders")
      .then(response => response.json())
      .then(data => {
        this.setState({
          ordersData: data.orders
        });
      })
      .then(() => {
        this.state.ordersData.forEach(order => {
          console.log(this.state.ordersData);
          fetch(
            `https://www.hatchways.io/api/assessment/workers/${order.workerId}`
          )
            .then(result=> result.json())
            .then(data2 => {
              this.setState(prevState => ({
                workersDatas: [data2, ...prevState.workersDatas]
              }));
            });
          console.log(this.state.workersDatas);
        });
      })
      .catch(err => {
        console.log(err);
      });
  }