Question

我正在尝试使用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：无法将未定义或null转换为对象

Answer 1

在尝试访问异步数据之前，您无需等待异步解决（这是第一个问题，这将导致您看到错误。）当componentDidMount为时，组件尝试使用默认数据进行渲染。被解雇。
ordersData是处于默认状态的数组，而不是对象，因此访问错误
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
}

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

使用React.js映射对象

1 个答案: