Map函數在React組件中返回帶有未定義元素的數組

Question

我目前有一個組件，其中使用以下render函數將道具傳遞到其中：

 render(){ return ( <Card> <CardHeader>{this.props.title}</CardHeader> <CardBody> <CardSubtitle>Count: {Object.keys(this.props.machines).length}</CardSubtitle> { Object.keys(this.props.machines).length != 0 ? <ListGroup> { console.log('array result: ', Object.keys(this.props.machines).map((machine, key) => { console.log('machine name: ', machine); return <ListGroupItem key={key}> {machine} </ListGroupItem> }) ) } { Object.keys(this.props.machines).map((machine, key) => { console.log('machine name: ', machine); return <ListGroupItem key={key}> {machine} </ListGroupItem> }) } </ListGroup> : null } </CardBody> </Card> ); } 

問題是map函數返回的數組包含undefined元素，如console.log('array result: '...) 。 但是， console.log('machine name: ', machine)確實顯示了各個字符串元素，如以下屏幕截圖所示：

我嘗試用其他標簽（例如div替換<ListGroupItem> ，但無濟於事。 任何幫助都感激不盡。

Answer 1

問題是，從地圖返回時，您的JSX在下一行要返回，因此在編譯時，在返回后插入自動分號，在這種情況下它返回未定義，因此您必須在同一行中包含JSX元素或使用()

{
     console.log('array result: ',
     Object.keys(this.props.machines).map((machine, key) => {
           console.log('machine name: ', machine);
           return (    // parenthesis here
                <ListGroupItem key={key}>
                    {machine}
                </ListGroupItem>
            )
     })
}

要么

{
     console.log('array result: ',
     Object.keys(this.props.machines).map((machine, key) => {
           console.log('machine name: ', machine);
           return <ListGroupItem key={key}>
                    {machine}
                </ListGroupItem>
     })
}