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

Question

---

您好， 请解决我的问题。我知道您只需要这些代码就可以知道问题出在哪里。我也显示错误。提前致谢。

// importing react and other bootstrap stuffs  
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>

这应该可以解决问题。