Map函数返回React组件中包含未定义元素的数组

Question

我目前有一个组件，我已使用以下render函数传递道具：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题是map函数返回的数组包含undefined元素，如console.log('array result: '...)中所示。但是，console.log('machine name: ', machine)会显示单个字符串元素，如下面的屏幕截图所示：

我尝试将<ListGroupItem>替换为其他标记，例如div，但无济于事。任何帮助将不胜感激。

Answer 1

问题是，从map返回时，你的JSX在下一行返回，所以在编译时，在返回后插入自动分号，在这种情况下它返回undefined，你必须在同一行中有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>
     })
}