javascript - Cannot destructure property 'data' of '(intermediate value)' as it is undefined - S

admin管理员组

文章数量:1181399

This error is in the console and it prevents the app from working, I cant find the bug at all if anyone could help? Its a MERN application

The code in question

export const getPosts = () => async (dispatch) => {
    try {
      const { data } = await api.fetchPosts();
  
      dispatch({ type: 'FETCH_ALL', payload: data });
    } catch (error) {
      console.log(error.message);
    }
  };

VSC is telling me await doesn't effect this kind of expression, which it should as fetchPosts is a request? The code for this is below

export const fetchPosts = () => {
    axios.get(url)
}

This error is in the console and it prevents the app from working, I cant find the bug at all if anyone could help? Its a MERN application

The code in question

export const getPosts = () => async (dispatch) => {
    try {
      const { data } = await api.fetchPosts();
  
      dispatch({ type: 'FETCH_ALL', payload: data });
    } catch (error) {
      console.log(error.message);
    }
  };

VSC is telling me await doesn't effect this kind of expression, which it should as fetchPosts is a request? The code for this is below

export const fetchPosts = () => {
    axios.get(url)
}

• javascript
• reactjs

Share Improve this question Follow edited Feb 23, 2021 at 20:15 Emile Bergeron 17.4k55 gold badges8484 silver badges131131 bronze badges asked Feb 23, 2021 at 19:54 Dan WilstropDan Wilstrop 43511 gold badge55 silver badges1515 bronze badges 2

• 2 Does this answer your question? When should I use a return statement in ES6 arrow functions – Emile Bergeron Commented Feb 23, 2021 at 20:15
• Thank you for the help – Dan Wilstrop Commented Feb 23, 2021 at 20:42

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 22

The problem is that, although axios.get may return a promise, the fetchPosts function you've wrapped it in doesn't return the promise that axios.get returns:

const fetchPosts = () => {
    axios.get(url);
};

const myFetch = await fetchPosts();

console.log(myFetch); // will log `undefined`

If you rewrite fetchPosts as so:

export const fetchPosts = () => axios.get(url);

...with the implicit return from your arrow function, I think it should work. Alternatively, you could just explicitly return the result of axios.get:

const fetchPosts = () => {
    return axios.get(url);
};

...but your linter may complain about that.

let's try to return a Promise from the function, that use axios:

export const fetchPosts = async () => return await axios.get(url);

And then you can use destructuring at then-block of handling Promise

export const getPosts = async dispatch => {
  await fetchPosts()
    .then({data}) => dispatch({ type: 'FETCH_ALL', payload: data)
    .catch(error => {console.log(error.message)});
}

本文标签：