使用 React.js 映射对象

Question

I am trying to use the map function to map an object. I've seen similar posts where this has worked using Object.keys but I can't seem to get it to work. I realize that you can't map an object directly.

A portion of my json is below:

{
    "orders": [
        {
            "deadline": 1563046159,
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "id": "83f007d6",
            "name": "Work order 83f007d6",
            "workerId": 1
        },
        {
            "deadline": 1562752687,
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "id": "cb23c526",
            "name": "Work order cb23c526",
            "workerId": 1
        },
]
}

Relevant Code

class App extends Component {

state = {
ordersData: [],
workersData : []
}

// fetch for the first time page loads
componentDidMount() {

fetch("https://www.hatchways.io/api/assessment/work_orders")
  .then(response => response.json())
  .then(data => {
    this.setState({
      ordersData: data,
    });
    console.log(this.state.ordersData)
  })
  .catch(err => {
    console.log(err)
  });  
}

render() {
let allOrders = this.state.ordersData.orders;

return (
  <div> 
  {Object.keys(allOrders).map((keyName, i) => (
    <li className="allOrders" key={i}>
        <span className="input-label">key: {i} Name: {allOrders[keyName]} 
 </span>
    </li>
  ))}
  </div>
  )}}

I get this error : TypeError: Cannot convert undefined or null to object

Answer 1

1. You are not waiting for your async to resolve before trying to access your async data (this is the first issue, which is causing the error you are seeing.) The component tries to render with default data while componentDidMount is fired.

2. ordersData is an array in your default state, not an object, so you are accessing it wrong

3. allOrders is an array, not an object, so you could just map it directly. Then you can use the .keys() method on the results of that map.

To resolve 1 and 2 you should give a more complete default state so that you don't get the TypeError

state = {
    ordersData: {orders:[]},
    workersData : []
}

To resolve 3 you will need to change to something along the lines of:

allOrders.map(order => {
 //now you have each order, you can use Object.keys(order).map() to get each property of the order
}

I hope this makes sense and clears things up. Comment if you have questions about the individual parts.