React Error: TypeError: Cannot destructure property

Question

I have this error « Error: TypeError: Cannot destructure property 'id' of 'fetchedData' as it is undefined. » and I don’t know how to deal with it

It’s a react app (port 3001) that use a micro API (port 3000).

import Data from "./Data";

export default class Service {

  /**
   * Fetch the user main data from the API
   * @param   {function}  resolve   the function for success
   * @param   {number}    id        the user ID
   * @return  {void}
   */
   getData = (resolve, id) => {
    fetch(`http://localhost:3000/user/${id}`)
      .then((response) => response.json())
      .then((result) => {
        const data = new Data();
     console.log(result)
        resolve(data.getData(result.data));
      })
      .catch((error) => {
        console.log("Error: ", error);
      })
  };
}

the console log tell me « can not get user »

here is the Data class

export default class Data {
  /**
   * Service to handle the fetched data (user data)
   * @param   {object}  fetchedData   The data from the API
   * @return  {object}                The formatted data for the front
   */
  getData(fetchedData) {
    const { id, userInfos } = fetchedData;
    const { firstName, lastName, age } = userInfos;
    const userObj = new Infos(firstName, lastName, age);
    const userDataObj = new MainData(id, userObj);

    return userDataObj;
  }
}

I’ve no idea how to deal with this error and where is my mistake.

Are you sure the error message isn't complaining about destructuring fetchedData? — Chris Farmer
– Chris Farmer, Commented Jul 13, 2021 at 16:14
Then it looks like result.data is undefined when you pass it into getData(), and it's failing at const { id, userInfos } = fetchedData because fetchedData is now undefined. — Chris Farmer
– Chris Farmer, Commented Jul 14, 2021 at 12:43
Ok but when I put a valid id on the fetch path instead of $ {id}. the console.log(result.data) give me the object I'm looking for. — Manitou13
– Manitou13, Commented Jul 16, 2021 at 14:10
The meaning of ${id} inside backticks is not at all related to the destructuring { id } = whatever, so I'm confused about your last comment. — Chris Farmer
– Chris Farmer, Commented Jul 16, 2021 at 15:01

Manitou13 · Accepted Answer · 2021-07-26 15:22:40Z

So I finally found a solution, the problem was to be able to retrieve the id inside the url and use it in the different child components that needed it. It's not a very elegant solution but it worked.

/**
   * Fetch the user main data from the API
   * @param   {number}    id        the user ID
   * @param   {function}  resolve   the function for success
   * @param   {function}  reject    the fonction to handle error
   * @return  {void}
  */

  getData = (id) => {
    return new Promise((resolve, reject) => {
      fetch(`http://localhost:3000/user/${id}`)
      .then((response) => response.json())
      .then((result) => {
        const data = new Data();
        resolve(data.getData(result.data));
      })
      .catch((error) => {
        reject(error);
      })
    }) 
  };

And how I use it in a child component

class Dashboard extends Component {
  constructor(props) {
    super(props);
    const url = window.location.href.split("/");
    this.state = {
      id: url[url.length -1],
      keyData: {},
    };
    this.service = new Service();
    
    this.updateData = this.updateData.bind(this);
  }

  componentDidMount() {
    this.service.getData(
      this.state.id
    ).then(data=>{
      this.updateData(data)
    }).catch(error=>{
      console.log(error)
    })
  }

Collectives™ on Stack Overflow

React Error: TypeError: Cannot destructure property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related