Question

我需要来自API调用1的数据添加到API调用2的URL。来自API 2的数据将进入API 3的URL。我正在为每个Axios请求设置状态，并且该状态不起作用。返回未定义

componentDidMount() {
  // Get the IP adress of user
  axios
    .get('https://api.ipify.org?format=json')
    .then(res => {
      this.setState({
        ip: res.data.ip
      });
      console.log(`IP : ${this.state.ip}`);
    })
    .catch(err => console.log(err));

  // GET the coordinates of a location based on IP adress
  axios
    .get(
      'https://geo.ipify.org/api/v1?apiKey=YOUR_API_KEY&ipAddress=24.8.227.87'
    )
    .then(res => {
      this.setState({
        latitude: res.data.location.lat,
        longitude: res.data.location.lng
      });
      console.log(
        `Latitude: ${this.state.latitude}. Longitude: ${this.state.longitude}`
      );
    })
    .catch(err => console.log(err));

  // Make the API call on page load
  axios({
      method: 'get',
      url: `https://developers.zomato.com/api/v2.1/geocode?lat=39.6924553&lon=-105.0256318`,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Accept: 'application/json',
        'user-key': 'USER_KEY'
      }
    })
    .then(res => {
      const restaurantsNearMe = res.data.nearby_restaurants;

      this.setState({
        restaurants: restaurantsNearMe
      });

      // Pick out a random retaurant from what the API returns
      var randomRestaurant =
        restaurantsNearMe[
          Math.floor(Math.random() * restaurantsNearMe.length)
        ];

      // Select only the data that you want
      var finalResult = {
        name: randomRestaurant.restaurant.name,
        id: randomRestaurant.restaurant.id,
        rating: randomRestaurant.restaurant.user_rating.aggregate_rating,
        ratingColor: randomRestaurant.restaurant.user_rating.rating_color,
        address: randomRestaurant.restaurant.location.address,
        delivery: randomRestaurant.restaurant.is_delivering_now,
        typeOfFood: randomRestaurant.restaurant.cuisines
      };

      this.setState({
        restaurant: finalResult
      });
      console.log(this.state.restaurant);
    })
    .catch(err => console.log(err));
}

Answer 1

请记住，this.setState不是同步的。 React批处理多个set状态调用，以提高渲染性能。这就是为什么您可能会在console.log中看到未定义的原因。 setState方法将回调作为第二个参数。

this.setState(newState, callbalck)

所以尝试控制台登录回调并尝试一下。

Answer 2

我不知道如何调用API，但是，请尝试如下操作：

在componentDidMount中，您可以这样做：

async componentDidMount(){
  const resApiOne = await callFirstApi();
  this.setState({resApiOne});
  const resApiTwo = await callSecondApi(resApiOne);
  this.setState({resApiTwo});
}

Answer 3

在callback中需要一个setState，在该callback中，您需要调用第二个API，依此类推。选中this。

这就是您想要的，

axios
    .get('https://api.ipify.org?format=json')
    .then(res => {
        this.setState({
            ip: res.data.ip
        }, () => {
            // GET the coordinates of a location based on IP adress
            axios
                .get(
                    'https://geo.ipify.org/api/v1?apiKey=YOUR_API_KEY&ipAddress=24.8.227.87'
                )
                .then(res => {
                    this.setState({
                        latitude: res.data.location.lat,
                        longitude: res.data.location.lng
                    }, () => {
                        // Make the API call on page load
                        axios({
                                method: 'get',
                                url: `https://developers.zomato.com/api/v2.1/geocode?lat=39.6924553&lon=-105.0256318`,
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded',
                                    Accept: 'application/json',
                                    'user-key': 'USER_KEY'
                                }
                            })
                            .then(res => {
                                const restaurantsNearMe = res.data.nearby_restaurants;

                                this.setState({
                                    restaurants: restaurantsNearMe
                                });

                                // Pick out a random retaurant from what the API returns
                                var randomRestaurant =
                                    restaurantsNearMe[
                                        Math.floor(Math.random() * restaurantsNearMe.length)
                                    ];

                                // Select only the data that you want
                                var finalResult = {
                                    name: randomRestaurant.restaurant.name,
                                    id: randomRestaurant.restaurant.id,
                                    rating: randomRestaurant.restaurant.user_rating.aggregate_rating,
                                    ratingColor: randomRestaurant.restaurant.user_rating.rating_color,
                                    address: randomRestaurant.restaurant.location.address,
                                    delivery: randomRestaurant.restaurant.is_delivering_now,
                                    typeOfFood: randomRestaurant.restaurant.cuisines
                                };

                                this.setState({
                                    restaurant: finalResult
                                });
                                console.log(this.state.restaurant);
                            })
                            .catch(err => console.log(err));
                    });
                    console.log(
                        `Latitude: ${this.state.latitude}. Longitude: ${this.state.longitude}`
                    );
                })
                .catch(err => console.log(err));

        });
        console.log(`IP : ${this.state.ip}`);
    })
    .catch(err => console.log(err));

如何在一个API调用中设置状态并在下一个API调用中使用URL的数据？

3 个答案: