没有未使用的表达式 Reactjs 请帮助我
No-unused-expressions Reactjs Please assit me
您好,
请解决我的问题。我知道您只需要这些代码就可以知道问题出在哪里。我也显示错误。提前致谢。
// 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"
>
×
</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栈。
在您的地图函数中,您使用了大括号但没有明确返回该表达式。将那些大括号替换为 () 并将您的地图主体括在其中,如下所示:
<TransitionGroup className="Shopping-list">
{items.map(({ id, name }) => (
<CSSTransition
key={id}
timeout={500}
classNames="fade"
>
<Button
className="remove-btn"
color="danger"
size="sm"
>
×
</Button>
<ListGroupItem>{name}</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
这应该可以解决问题。
您好, 请解决我的问题。我知道您只需要这些代码就可以知道问题出在哪里。我也显示错误。提前致谢。
// 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"
>
×
</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栈。
在您的地图函数中,您使用了大括号但没有明确返回该表达式。将那些大括号替换为 () 并将您的地图主体括在其中,如下所示:
<TransitionGroup className="Shopping-list">
{items.map(({ id, name }) => (
<CSSTransition
key={id}
timeout={500}
classNames="fade"
>
<Button
className="remove-btn"
color="danger"
size="sm"
>
×
</Button>
<ListGroupItem>{name}</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
这应该可以解决问题。