javascript - 如何使用一个 API 中的 ID 从 Redux 中的另一个 API 获取信息？

Question

因此，API 链接 www.api.com/id_list 为我提供了另一个 API 中某些信息的 ID，链接为 www.api.com/{id}。

我正在使用 Redux，我可以获得 ID 列表，但是我很难通过 ID 获取所需的信息。它一直告诉我它是未定义的。

这是我的代码:

    export const EVENT_DETAIL = 'EVENT_DETAIL';

    export const eventDetail = (payload) => {
     return {
       type: EVENT_DETAIL,
       data: payload.data,
       index: payload.index
      };
    }  

    export const getDetail = (events, index) =>  {
        return function(dispatch) {
        const url = `${URL2}/${events}`;
        axios.get(url)
            .then (function (response) {
                   dispatch(eventDetail({
                   data: response.data.events,
                   index: index
               }))
            })
            .catch(function(error) {
                console.log(error);
            })
        }
    }

    componentDidMount = () =>  {
        this.props.getDetail();
        console.log(this.props.getDetail())
       }

关于为什么我无法显示信息的任何想法？

不断出现以下错误:

Error: Request failed with status code 404
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:78)

Answer 1

您的 getDetail 操作正在返回一个本身不返回任何内容的函数 - 这就是未定义记录到您的控制台的原因。在您的 axios.get 函数前面放一个 return，这将以 promise 的形式发出您的请求。

return axios.get(url)
  .then (function (response) {
    dispatch(eventDetail({
      data: response.data.events,
      index: index
    }))
  })
  .catch(function(error) {
    console.log(error);
  })
}

要从您的请求中获得响应，您需要等待它解决。这是通过在 promise 上调用 .then 来完成的。您的 componentDidMount 看起来像这样。

componentDidMount = () =>  {
  this.props.getDetail()
  .then(res => console.log(res))
}