reactjs - React 中的 .map() 问题

Question

我正在尝试遵循本教程。在这方面，我在 React.js 中有以下代码

render () {
    const { items } = this.state;
    return (
        <Container>
            <Button
                color = "dark"
                style = { { marginBottom: '2rem' } }
                onClick = { () => {
                    const name = prompt( 'Enter Item' ); 
                    if(name) {
                        this.setState( state => ( {
                            items: [...state.items, { id: uuid(), name }]
                        } ));
                    }
                } }
            >Add Item</Button>
            <ListGroup>
                <TransitionGroup className="shopping-list">
                    { 
                        items.map(({id, name}) => {
                            <CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
                                <ListGroupItem>
                                    { name }
                                </ListGroupItem>
                            </CSSTransition>
                        })
                    }
                </TransitionGroup>
            </ListGroup>                        
        </Container>
    ); 
}

我收到如下错误

为什么我收到此错误？问题在里面.map()。我尝试了几种方法，但找不到解决方案。

更新

如果我使用下面的代码，我不会收到任何错误

<ListGroup>
    <TransitionGroup className="shopping-list">
        { 

        }
    </TransitionGroup>
</ListGroup>

标签： reactjs

Answer 1

地图中没有返回任何内容。将您的代码更新为以下，它将起作用。

<ListGroup>
   <TransitionGroup className="shopping-list">
      { 
        items.map(({id, name}) => {
         return (<CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
              <ListGroupItem>
                 { name }
              </ListGroupItem>
         </CSSTransition>)
         })
      }
   </TransitionGroup>
</ListGroup>