Question

我试图呈现我的workerData和ordersData，但是在获取API之后，可以使用map呈现ordersData，但是当我尝试呈现workerData时，它什么也没做。我检查了console.log，似乎它确实填充了正确的数据，但是当我尝试映射它时，它不会呈现它。我对React还是很陌生，因此可以提供任何帮助。

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

这是因为.value =可能会异步更新状态，因此不要在更新状态后立即获取状态。 document可能有助于理解状态。

Answer 2

this.state.workersDatas.push(data2)是禁忌。

Do Not Modify State Directly。它不会重新渲染您的组件。这可能就是为什么您在控制台中看到正确的数据，而不是在组件中看到正确数据的原因。

要使获取的数据流更易于阅读，请将其分成多个块，而不是尝试嵌套多个回调。获取ordersData并设置状态。然后使用该状态获取workerData，并使用传播运算符进行设置。

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

React.js数据未保存到状态变量

2 个答案: