Question

我正在使用componentDidMount中的两个API进行获取。第二次获取需要获取第一次获取的ID。

第一个抓取效果很好，但是当我要为第二个抓取映射它时，出现一个错误：无法读取未定义的属性'then'

Orders json的一部分如下：

{
    "orders": [
        {
            "deadline": 1563046159,
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "id": "83f007d6",
            "name": "Work order 83f007d6",
            "workerId": 1
        },
        {
            "deadline": 1562752687,
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "id": "cb23c526",
            "name": "Work order cb23c526",
            "workerId": 1
        },
]
}

工作者json在下面：

{
    "worker": {
        "companyName": "Topiczoom",
        "email": "fstorie0@topiczoom.com",
        "id": 0,
        "image": "http://dummyimage.com/250x250.jpg/ccccff/000000",
        "name": "Frans Storie"
    }
}

class App extends Component {

constructor(props) {
  super(props);
  this.state={
    ordersData: [],
    workersData:[]
  }
} 


  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)
          .then(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.setState ({
                workersData : data2.worker
              })
            })
          }))
          console.log(this.state)
        })
      .catch(err => {
        console.log(err)
      }); 
  }

无法读取未定义的属性'then'

Answer 1

在.then内没有fetch的情况下，不能像以前那样直接使用fetch。

您需要callback中的setState才能根据来自第一个API响应的状态集来调用另一个API，

fetch("https://www.hatchways.io/api/assessment/work_orders")
    .then(response => response.json())
    .then(data => {
        this.setState({
            ordersData: data.orders
        }, () => { //callback of setState, now here you can access state
            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.setState({
                            workersData: data2.worker
                        }, () => console.log(this.state))
                    })
            })
        });
    })
    .catch(err => {
        console.log(err)
    });

更新

要存储所有记录，

 () => { //callback of setState, now here you can access state
            console.log(this.state.ordersData)
            let workersData = [];
            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 => {
                        workersData.push(data2.worker)
                    })
            })
            this.setState({
                   workersData
            }, () => console.log(this.state))
        });

React无法读取componentDidMount中未定义的属性'then'

1 个答案: