Question

Reactjs：未捕获（承诺中）TypeError：无法读取未定义的属性“数据”

2019-11-28

1765

reactjs react-redux axios

我对 reactjs 还很陌生，我试图调用 api 数据通过 axios 获取响应。但一次又一次地得到同样的错误。

错误未捕获（在承诺中）TypeError：无法读取未定义的属性“数据”。

有很多类似的问题，但我找不到任何可以帮助我的答案。我使用的代码如下。

代码

const token = userService.getToken();

  const api = `http://localhost:54729/api/Search?searchString=${text}`;
  axios
    .get(api, { headers: { Authorization: `Bearer ${token}` } })
    .then(res => {
      console.log("hello" + res);
      try {
        dispatch({
          type: FETCH_PRODUCTS,
          payload: res.data// Dummy data
        });
      } catch (err) {
        console.log("error" + err);
        console.log(res.data);
      }
    });

编辑

来自 api 的响应是

[
    {
        "id": 0,
        "title": "example-, example- und example(CC 11): example– example Berlin",
        "description": null,
        "owner": null,
        "link": "/search/herz?url=https://www.example.de/example/example/example/",
        "url": "https://www.example.de/example/charitecentren/example/",
        "type": "External",
        "rank": 0
    },
    {
        "id": 0,
        "title": "example Klinik mit exampleKardiologie (example) - Charité – example Berlin",
        "description": null,
        "owner": null,
        "link": "/search/herz?url=https://example-cvk.example.de/",
        "url": "https://example-example.example.de/",
        "type": "External",
        "rank": 0
    },
    {
        "id": 0,
        "title": "Deutsche Zentren example example: example– Universitätsmedizin example",
        "description": null,
        "owner": null,
        "link": "/search/herz?url=https://www.example.de/forschung/example/example/",
        "url": "https://www.example.de/example/example/deutsche_zentren_fuer_gesundheitsforschung/",
        "type": "External",
        "rank": 0
    },
]

当我 console.log(res.data) 时，它显示 undefined 。

此外，到目前为止还没有人问我 dispatch: FETCH_PRODUCTS 到底在做什么。您可以在下面看到它。也许这会对我正在尝试做的事情有所帮助。

        case FETCH_PRODUCTS:
            console.log(action)
            return {
                ...state,
                products: action.payload,
                loading: false,
                totalRecords: action.payload.length,
            };

Answer 1

您的 res 对象中没有 data 对象。您的 res 是 API 返回的数组。因此，只需执行 console.log(res) 而不是 console.log(res.data) 即可解决问题。

Answer 2

好吧，在彻底深入了解代码之后，我得出结论，我们正在使用拦截器来传递响应。

拦截器之前看起来像这样

 axios.interceptors.response.use(
    response => {
      if (response.status !== 200) {
        const error =
          (response.data && response.data.message) || response.statusText;
        cogoToastHelper.error(error);
        console.log("I am here in Interceptor");
        return Promise.reject(error);
      }
      console.log("I am here in Interceptor before cogoToast");
      cogoToastHelper.info(response.data.message);
      //return response.data.data;
      console.log("HERE RESPONSE" + response.data.data);
        return response.data.data;

所以我将其更改为下面的代码

 axios.interceptors.response.use(
    response => {
      if (response.status !== 200) {
        const error =
          (response.data && response.data.message) || response.statusText;
        cogoToastHelper.error(error);
        console.log("I am here in Interceptor");
        return Promise.reject(error);
      }
      console.log("I am here in Interceptor before cogoToast");
      cogoToastHelper.info(response.data.message);
      //return response.data.data;
      console.log("HERE RESPONSE" + response.data.data);
      if (response.data.data !== undefined) {
        console.log("I got response.data.data");
        return response.data.data;
      } else {
        console.log("I got response.data");
        return response.data;
      }

现在它可以工作了。

Answer 3

您可以尝试类似

const token = userService.getToken();

  const api = `http://localhost:54729/api/Search?searchString=${text}`;
  const resData = async()=> axios.get(api, { headers: { Authorization: `Bearer ${token}`

try{
console.log(resData.data,"Response from api")
dispatch({type: FETCH_PRODUCTS,payload: resData.data});
}
catch(e){
 console.log("error" + err);
}