javascript - React - 期望进行赋值或函数调用，但却看到表达式无法编译

Question

所以我有这个带有 laravel 后端和 React 的 TODO 列表应用程序，当我启动我的 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;

并且第126行:是

之后的行

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

这是第 126 行。请帮忙

Answer 1

您需要明确返回您的jsx

      {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>);
        })}

此外，您的绑定(bind)状态不正确。

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