React Fetch API Data - Object Undefined

Question

I am trying to pull JSON data from Shipstation. All i want to do at this point is store the data in a state object called Orders and render the shipment IDs to a page. I am getting the following error:

Line 25: 'orders' is not defined no-undef

import React, { Component } from "react";
class Orders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orders: []
    };
  }

  componentDidMount() {
    let key = "[MY KEY GOES HERE]";
    let secret = "[MY SECRET GOES HERE]";
const encodedString = new Buffer(key + ":" + secret).toString("base64");

fetch("https://ssapi.shipstation.com/orders/", {
  headers: {
    Authorization: "Basic " + encodedString
  }
})
  .then(res => res.json())
  .then(data => {
    this.setState({ orders: data });
    console.log(orders);
      })
      .catch(err => console.log(err));
  }

  render() {
    const { orders } = this.state;

const orderItems = orders.map(order => (
  <div key={order.id} className="card card-body mb-2">
    <div className="row">
      <div className="col-md-6">
        <p>{order.orderId}</p>
      </div>
    </div>
  </div>
));
return (
  <div ref="myRef">
    <hr />
    <h3 className="mb-4">Recent Shipments</h3>
    {orderItems}
  </div>
);
  }
}

export default Orders;

Colin Burke · Accepted Answer · 2018-08-24 13:58:34Z

1

That looks like an ESLint error, and it's just saying that you can't do

console.log(orders);

because you haven't actually defined the variable anywhere at that point.

You could change your code to:

const orders = data;
this.setState({ orders });
console.log(orders)

and everything should work fine.

answered Aug 24, 2018 at 13:58

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Peyton Over a year ago

The constructor props has a state array defined as 'orders'. From the componentDidMount() function I'm trying to store the JSON data in that state using setState() and console log the content of the orders state. Am I logging the wrong output? If I remove the console log statement, THAT error goes away and I receive an error saying: TypeError: orders.map is not a function

Colin Burke Over a year ago

Ah, you're right – sorry. If you're trying to log state then you'll need to do: console.log(this.state.orders).

Joe Peyton Over a year ago

This consoles the data and there are no errors caught from calling fetch(). However, I am still receiving a TypeError: orders.map is not a function. The orders state is assigned as an array. This error should only display if the orders state was assigned as something else (ie. string or object)

Colin Burke Over a year ago

The data coming back from your API probably isn't an array like you're expecting.

Joe Peyton Over a year ago

This was fixed by setting orders.map() to this.state.orders.map()

Collectives™ on Stack Overflow

React Fetch API Data - Object Undefined

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related