如何从一个 api 存储中获取数据到状态，然后将此数据传递到另一个 api答案

【问题标题】：How to fetch the data from one api store into state and then pass this data into another api如何从一个 api 存储中获取数据到状态，然后将此数据传递到另一个 api
【发布时间】：2020-12-19 11:24:07
【问题描述】：

class myFetchData extends Component {
    constructor(props){
        super(props)

        this.state = {
            data : [],
            Issuer_News : []
        }
    }
    componentDidMount(){
        this.setState({loading : true})

        axios.post('https://bqskvn9laah.execute-api.ap-south-1.amazonaws.com/Dev/datalist',{
            DATA: this.state.data
          }).then((response) => {
            this.setState({data : res, number_of_data : response.data[1].total_data_issued_by_the_company,loading : false})})
            .catch(err => console.log(err))

        fetch(`https://gnews.io/api/v3/search?q=${this.state.data.Issuer_Name}&max=5&token=52498bb02769e98d131156c2648628ca`)
        .then( response => response.json())
        .then(data => this.setState({Issuer_News : data.articles}))
}

我想要来自 API 1 的数据并将数据从 API 1 传递到 API 2 但 this.state.data 返回 undefined。

【问题讨论】：

API 调用和 setState 一样是异步的。它不会等待调用完成并进行第二次 API 调用。您应该在 .then 中进行第二次调用

标签： javascript reactjs react-native api fetch

【解决方案1】：

在 ReactJS 中，setState 和 fetch 函数都是异步的，所以这就是你得到 undefined 的原因。因为 API 2 可以在 API 1 的成功承诺返回之前运行。我更喜欢在 success promise 中调用 API 2 的 fetch 函数。像这样

    axios.post('https://bqskvn9laah.execute-api.ap-south-1.amazonaws.com/Dev/datalist',{
        DATA: this.state.data
      }).then((response) => {
        this.setState({data : res, number_of_data : 
     response.data[1].total_data_issued_by_the_company,loading : false})
      fetch(`https://gnews.io/api/v3/search?q=${response.data.Issuer_Name}&max=5&token=52498bb02769e98d131156c2648628ca`)
    .then( response => response.json())
    .then(data => this.setState({Issuer_News : data.articles}))
}).catch(err => console.log(err))

我建议你使用一些状态管理器库，比如 redux、redux-saga 来更轻松地控制你的 api 调用流程

【讨论】：

【解决方案2】：

在这种情况下，如果要链接 api 调用，则需要在接收数据的第一个 api 的 then() 块的 setState 方法中调用第二个 api。 setState 方法有一个变体，您可以在其中将函数作为参数传递，并确保仅在调用 setState 时运行。

如果您使用this.state.data，仅在 then() 块中进行调用是不够的。您需要将 fetch 调用放在 setState 的回调函数中。如果不想使用回调函数变体，那么直接在 then() 方法中使用响应变量即可。

假设axios.post 是第一个API，fetch 是第二个

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

    axios.post('<yourUrl>', {
        ...
      }).then((response) => {
        this.setState({<setYourState>}, () => {
           fetch(`https://gnews.io/api/v3/search?q=${this.state.data.Issuer_Name}&max=5&token=52498bb02769e98d131156c2648628ca`)
               .then( response => response.json())
               .then(data => this.setState({Issuer_News : data.articles}))
}
        })
})
        .catch(err => console.log(err))

【讨论】：