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

【问题标题】：Reactjs: Uncaught (in promise) TypeError: Cannot read property 'data' of undefinedReactjs：未捕获（承诺）TypeError：无法读取未定义的属性“数据”
【发布时间】：2020-03-24 04:01:30
【问题描述】：

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

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

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

代码

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,
            };

【问题讨论】：

能否请您在此处附上 API 的回复？
当您安慰res 时，它显示了什么？可能res里面没有data 属性。
我再次编辑了问题。
console.log(res) 的结果是否也未定义？
是的，它也是未定义的@octobus

标签： reactjs react-redux axios

【解决方案1】：

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

【讨论】：

里面什么都没有……甚至console.log(res)是未定义的
我的猜测是这不是前端问题，您确定数组是您从 API 调用中获得的实际响应吗？该调用是否引发任何其他错误？
后端的 api 运行良好。 Array 是实际的响应。

【解决方案2】：

您需要将您的响应作为 .then 方法中的参数，如下所示

   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);
      }
    });

【讨论】：

不， res 未定义。我不知道这里有什么问题。
另外，我再次编辑了问题，可能现在你更容易理解了
结果是一样的..！这太令人困惑了。 !
@Khan 这次你在res 有什么东西吗？还是未定义？

【解决方案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);
}

【讨论】：

【解决方案4】：

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

拦截器之前是这样的

 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;
      }

现在它可以工作了。

【讨论】：