Question

我对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

您需要在.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);
      }
    });

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

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

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

现在可以使用了。

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

4 个答案: