时间戳

首页 > 解决方案 > 使用 React.js 映射对象

reactjs - 使用 React.js 映射对象

问题描述

我正在尝试使用 map 函数来映射对象。我看过类似的帖子，其中使用 Object.keys 有效，但我似乎无法让它工作。我意识到你不能直接映射一个对象。

我的json的一部分如下：

{
    "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
        },
]
}

相关代码

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

我收到此错误：TypeError: Cannot convert undefined or null to object

标签： reactjs

解决方案

  1. 在尝试访问异步数据之前，您无需等待异步解决（这是第一个问题，这导致您看到的错误。）组件尝试在 componentDidMount 被触发时使用默认数据进行渲染。

  2. ordersData 是默认状态下的数组，而不是对象，因此您访问它是错误的

  3. allOrders 是一个数组，而不是一个对象，所以你可以直接映射它。然后，您可以对该映射的结果使用 .keys() 方法。

要解决 1 和 2，您应该提供更完整的默认状态，以免收到 TypeError

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

要解决 3，您需要更改为以下内容：

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

我希望这是有道理的，并且可以解决问题。如果您对各个部分有疑问，请发表评论。

推荐阅读