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

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": "[e-mail]",
        "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”

标签： reactjs

Answer 1

你不能像你一样在没有inside 的.then情况下直接使用。fetchfetch

您需要根据第一个 API 响应中设置的状态调用另一个 API callback，setState

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