React - 预期赋值或函数调用，而是看到表达式编译失败

Question

所以我有这个带有 laravel 后端和 React 的待办事项列表应用程序，当我 nom 启动我的 React 应用程序时，它向我显示以下内容：

./src/List.js
Line 126:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
Search for the keywords to learn more about each error.

有人知道为什么会这样吗？我尝试了所有方法，但没有任何反应，而且我是 React 的新手，我遵循了 Laravel API 路由和 React js 前端的教程

这是我List.js：

import React, { Component } from "react";
import { getList, addItem, deleteItem, updateItem } from "./ListFunctions";
class List extends Component {
constructor() {
super();
this.state({
id: "",
title: "",
editDisabled: false,
items: []
});
this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
componentDidMount() {
this.getAll();
}
onChange = e => {
this.setState({
[e.target.name]: e.target.value
});
};
getAll = () => {
getList().then(data => {
this.setState(
{
title: "",
items: [...data]
},
() => {
console.log(this.state.items);
}
);
});
};
onSubmit = e => {
e.preventDefault();
addItem(this.state.title).then(() => {
this.getAll();
});
this.setState({
title: ""
});
};
onUpdate = e => {
e.preventDefault();
addItem(this.state.title, this.state.id).then(() => {
this.getAll();
});
this.setState({
title: "",
editDisabled: ""
});
this.getAll();
};
onEdit = (itemid, e) => {
e.preventDefault();
var data = [...this.state.items];
data.forEach((item, index) => {
if (item._id === itemid) {
this.setState({
id: item.id,
title: item.title,
editDisabled: true
});
}
});
};
onDelete = (val, e) => {
e.preventDefault();
deleteItem(val);
this.getAll();
};
render() {
return (
<div className="col-md-12">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label htmlFor="title">Title</label>
<div className="row">
<div className="col-md-12">
<input
type="text"
className="form-control"
id="title"
name="title"
value={this.state.title || ""}
onChange={this.onChange.bind(this)}
/>
</div>
</div>
</div>
{!this.state.editDisabled ? (
<button
type="submit"
className="btn btn-success btn-block"
onClick={this.onSubmit.bind(this)}
>
Submit
</button>
) : (
""
)}
{this.state.editDisabled ? (
<button
type="submit"
onClick={this.onUpdate.bind(this)}
className="btn btn-primary btn-block"
>
Update
</button>
) : (
""
)}
</form>
<table className="table">
<tbody>
{this.state.items.map((item, index) => {
<tr key={index}>
<td className="text-left">{item.title}</td>
<td className="text-right">
<button
href=""
className="btn btn-info mr-1"
disabled={this.state.editDisabled}
onClick={this.onEdit.bind(this, item.id)}
>
Edit
</button>
<button
href=""
className="btn btn-danger"
disabled={this.state.editDisabled}
onClick={this.onEdit.bind(this, item.id)}
>
Delete
</button>
</td>
</tr>;
})}
</tbody>
</table>
</div>
);
}
}
export default List;

Line 126:是后面的线

<tbody>
{this.state.items.map((item, index) => {

那是第126行。请帮忙

Answer 1

您需要明确returnjsx

{this.state.items.map((item, index) => {
return(
<tr key={index}>
<td className="text-left">{item.title}</td>
<td className="text-right">
<button
href=""
className="btn btn-info mr-1"
disabled={this.state.editDisabled}
onClick={this.onEdit.bind(this, item.id)}
>
Edit
</button>
<button
href=""
className="btn btn-danger"
disabled={this.state.editDisabled}
onClick={this.onEdit.bind(this, item.id)}
>
Delete
</button>
</td>
</tr>);
})}

你也没有正确bindingstate。

constructor(){
this.state = {
id: "",
title: "",
editDisabled: false,
items: []
}
}

Answer 2

您也可以保留bind，只要您使用箭头函数进行方法声明，例如onEdit = event => {而不是function onEdit(event)。 只需改用以下模式：

onEdit = event => {
...
const { target: { id } } = event;
this.setState({ id });
}
render(){
return (
...
<button id={item.id} onClick={this.onEdit}>
...
)
}

Answer 3

您不会在映射函数上返回任何内容：

{
this.state.items.map((item, index) => {
return (
<tr key={index}>
<td className="text-left">{item.title}</td>
<td className="text-right">
<button
href=""
className="btn btn-info mr-1"
disabled={this.state.editDisabled}
onClick={this.onEdit.bind(this, item.id)}
>
Edit
</button>
<button
href=""
className="btn btn-danger"
disabled={this.state.editDisabled}
onClick={this.onEdit.bind(this, item.id)}
>
Delete
</button>
</td>
</tr>
);
});
}