在一个 componentDidMount 中有多个 API 调用 - 可能吗？

Question

我有一个相当棘手的问题。在我的 componentDidMount 方法中，我有：
1.) 在变量“dog”上设置状态 2.) 通过 axios 进行 API 调用，其响应设置另一个变量“dogName”的状态

这会产生问题（我想要呈现给浏览器的数据没有呈现） - 那么有没有更好的方法来编写我的代码？

setData = async () => {
  const x = await fetch("https://dog.ceo/api/breed/hound/images");
  const y = await x.json();
  const z = await y.message;
  
  let newArr = [];
  for (let i = 0; i < z.length; i++) {
    if (i <= 9) {
      newArr.push(z[i]);
    }
   }
  return newArr;
  };

componentDidMount() {
  this.setState({
    loading:true
  })
  this.setData()
  .then(res =>{
    this.setState({
      loading:false,
      dog: res,
    })
  })
    axios.get('http://localhost:3000/dogs')
    .then(res => {
        this.setState({
            dogName:res.data
          })
        })
        .catch(error => {
          console.log(error)
        })
      }

Answer 1

这应该可以解决问题

您同时监听两个 Promise 解析，然后使用您获得的所有数据执行 setState。 我给你的建议是：你应该研究 react hooks 甚至 react-redux 来获取不直接在你的组件代码中的数据:)

componentDidMount() {
  this.setState({
    loading: true,
  });

  const dogPromise = this.setData();
  const dogNamePromise = axios.get('http://localhost:3000/dogs');

  Promise.all([
      dogPromise,
      dogNamePromise
  ])
    .then(([dogResponse, dogNameResponse]) => {
      this.setState({
        loading: false,
        dog: dogResponse,
        dogName: dogNameResponse.data,
      });
    })
    .catch(error => {
      console.log(error);
    });
}