React.js 如何在组件内循环和渲染组件？

Question

I'm trying to render components according to the data list. The data list include a list of address and records, in each address records, it contains one or multiple member records. The data structure looks like this:

combineData:[
addressData:{addressNo:... },
 memberDataList:[{...}]  
]

I want to render like this:

<address1>
<member1 of address 1>
<member2 of address 1>
<address2>
<member1 of address 2>
<member2 of address 2>
<member3 of address 2>
......

 
class AddressMembersTable extends React.Component {
    addressMembersViews = () => this.props.combineData.map((combineData, index) => {
        return (
            <Container layout="vbox">
                <AddressField
                    ref={'addressField'}
                    key={'addressField'}
                    addressData={combineData.addressData}
                />
  {combineData.memberDataList.forEach((memberData,index)=>{
               return(
                    <MemberField
                    ref={'memberField_' + index}
                   memberData = {combineData.memberDataList}
                   />
               )
        })}
        </Container>
        )

})}

I tried to loop the memberDataList for the MemberField components, but only AddressField is able to show. How can i render the components correctly?

Answer 1

You will map it the say way you did this.props.combineData . Array.prototype.forEach is a void return . You need to return the array of JSX you mapped to.

{combineData.memberDataList.map((memberData, index) => (
  <MemberField
    key={index}
    ref={'memberField_' + index}
    memberData = {combineData.memberDataList}
  />
))}

Answer 2

You are using the wrong list function.

map - transforms a list

forEach - performs side effects with each list item

const list = [1, 2, 3]
const double = n => n * 2

const a = list.map(double)
console.log(a) // [2, 4, 6]

const b = list.forEach(double)
console.log(b) // undefined