没有未使用的表达式 Reactjs 请帮助我

Question

请解决我的问题。我知道你只需要这些代码就可以知道问题出在哪里。我也显示了错误。预先感谢。

    // importing react and other bootstrap stuff  
   
    import React, { Component } from "react";
    import { Container, ListGroup, ListGroupItem, Button } from "reactstrap";
    import { CSSTransition, TransitionGroup } from "react-transition-group";
    import uuid from "uuid";
        
        class ShoppingList extends Component {
            state = {
                items: [
                    { id: uuid(), name: "Eggs" },
                    { id: uuid(), name: "Milk" },
                    { id: uuid(), name: "Steak" },
                    { id: uuid(), name: "Fruits" },
                    { id: uuid(), name: "Water" },
                ],
            };
            render() {
                const { items } = this.state;
                return (
                    <Container>
                        <Button
                            color="dark"
                            style={{ marginBottom: "2rem" }}
                            onClick={() => {
                                const name = prompt("Enter Item Name...");
                                if (name) {
                                    this.setState((state) => ({
                                        items: [...state.items, { id: uuid(), name }],
                                    }));
                                } else {
                                    alert("You Must Enter Item Name!");
                                }
                            }}>
                            Add Item
                        </Button>
        
                        <ListGroup>
                            <TransitionGroup className="Shopping-list">
                                {items.map(({ id, name }) => {
                                    <CSSTransition
                                        key={id}
                                        timeout={500}
                                        classNames="fade">
                                        <Button
                                            className="remove-btn"
                                            color="danger"
                                            size="sm">
                                            &times;
                                        </Button>
                                        <ListGroupItem>{name}</ListGroupItem>
                                    </CSSTransition>
                                })}
                            </TransitionGroup>
                        </ListGroup>
                    </Container>
                );
            }
        }
        
        export default ShoppingList;

这是我收到的错误

./src/components/ShoppingList.jsx
Line 41:29:  Expected an assignment or function call and instead saw an expression  no-unused- 
expressions

Search for the keywords to learn more about each error.

我想我已经提供了所有必要的信息。如果还想了解什么，欢迎评论区留言！ 我正在学习 MERN 堆栈，并在执行客户端工作时收到此错误。希望能及时得到答案，祈祷我能尽快学会 MERN 堆栈。

Answer 1

在您的地图函数中，您使用大括号但没有显式返回该表达式。将这些大括号替换为 () 并将地图主体括在其中，如下所示：

<TransitionGroup className="Shopping-list">
                            {items.map(({ id, name }) => (
                                <CSSTransition
                                    key={id}
                                    timeout={500}
                                    classNames="fade"
                                >
                                    <Button
                                        className="remove-btn"
                                        color="danger"
                                        size="sm"
                                    >
                                        &times;
                                    </Button>
                                    <ListGroupItem>{name}</ListGroupItem>
                                </CSSTransition>
                            ))}
                        </TransitionGroup>

这应该可以解决这个问题。