javascript - 难以遍历数组对象并从 Redux Store 中生成 JSX 中的动态 React 元素

Question

我正在从 API 获取一些数据并将其组织到 Object 中的 Arrays - 每个 Array是一个 Array的 Objects本身

const menuItems = { 
    Dinner: [{_id: "2af4", itemName: "Filtet Mignon"}],
    Fruit: [{_id: "41gg", itemName: "Strawberries"}, {_id: "2fas", itemName: "Apple"}, {_id: "gkkm", itemName: "Pear"}],
    Lunch: [{_id: "fmuu" itemName:"Artichoke Pizza"}]

}

这些项目从 API 中获取并存储在 Redux Store 中。

我成功地使用了 connect(mapStateToProps)(MyComponent)将这些项目置于我的组件的绑定(bind)功能范围内。

我想创建一个 <div>或 <button>每个项目的元素，但我的方法似乎不起作用。这是我尝试过的:

iterateThruObject() {
    const { menuItems } = this.props

    return Object.keys(menuItems).forEach((k) => { 
        return menuItems[k].map(item => <div key={item._id}>{item.itemName}</div>)
    })
}

render() {
 const { menuItems } = this.props
  return(
     {menuItems && this.iterateThruObject()}
  )}

据我所知 - 这应该有效。 iterateThruObject()被正确触发，如果我把console.log()在里面，我可以看到所有不同的属性正在循环。所以我很困惑为什么 <div>未创建元素。

我尝试使用 for...in循环遍历对象，但循环在第一个 return 处提前终止

如果有人能帮我解决这个问题，指出我的错误，我将不胜感激。

这是 console.log条目，以便数据结构更容易可视化:

console.log(Object.keys(menuItems))
// ["Dinner", "Fruit", "Lunch"]

 console.log(menuItems[k]) // 3 Invocations within .forEach()
// Array [{_id: "2af4", itemName: "Filtet Mignon"}]
// Array [{_id: "41gg", itemName: "Strawberries"}, {_id: "2fas", itemName: "Apple"}, {_id: "gkkm", itemName: "Pear"}]
// Array [{_id: "fmuu" itemName:"Artichoke Pizza"}]

menuItems[k].map(item => console.log(item.itemName)) // 3 .map() Invocations
// Filet Mignon - Iteration 1
// Strawberries - Iteration 2
// Apple - Iteration 2
// Pear - Iteration 2
// Artichoke Pizza - Iteration 3

Answer 1

只需使用 .map 而不是 forEach 这样就会返回一个对象:

return Object.keys(menuItems).map((k) => {
  return menuItems[k].map(item => <div key={item._id}>{item.itemName}</div>)
})

注意 forEach will always return undefined, unlike map or reduce :

forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable.

运行示例:

const data = {
  Dinner: [{ _id: "2af4", itemName: "Filtet Mignon" }],
  Fruit: [{ _id: "41gg", itemName: "Strawberries" }, { _id: "2fas", itemName: "Apple" }, { _id: "gkkm", itemName: "Pear" }],
  Lunch: [{ _id: "fmuu", itemName: "Artichoke Pizza" }]

}

class App extends React.Component {
  iterateThruObject = () => {
    const { menuItems } = this.props

    return Object.keys(menuItems).map((k) => {
      return menuItems[k].map(item => <div key={item._id}>{item.itemName}</div>)
    })
  }
  render() {
    const { menuItems } = this.props;
    return (
      <div >
        {menuItems && this.iterateThruObject()}
      </div>
    );
  }
}
ReactDOM.render(<App menuItems={data} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>