难以遍历Arrays数组并在Redux Store中生成JSX中的动态React元素

Question

I am fetching some data from an API and organizing it into an Object of Arrays - Each Array is an Array of Objects itself

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

}

These items are fetched from the API and stored in the Redux Store.

I am successfully using connect(mapStateToProps)(MyComponent) to bring these items within the scope of my Component's bound functions.

I would like to create a <div> or <button> element for each item, but my methods do not seem to be working. This is what I have tried:

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

As far as I can see - this should be working. The iterateThruObject() is being properly triggered, and if I put console.log() inside, I can see all of the different properties being cycled through. So I confused why the <div> elements are not being created.

I have tried to use a for...in loop to iterate through the Object, but the loop terminates early at the first return

If anyone can help me with this, point me to my mistake, I would really appreciate it.

Here are the console.log entries so the data structure is easier to visualize:

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

Just use .map instead of forEach so an object will get returned:

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

Note that 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.

Running example:

 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>