ReactJs函数调用，而是看到一个表达式no-unused-expressions

Question

我正在尝试在reactjs上准备restfulpi。 但是因为我是ReactJS的新手，而且我的英语不太流利，所以遇到了一个问题。 我申请的目的是列出出版商的书籍。 您可以从下面访问我的代码和错误。 如果您能帮助我，我可以做到。 谢谢。

错误：

第21行：预期分配或函数调用，而是看到一个表达式no-unused-expressions

我的代码：

`` ` 
class App extends Component {
  state = {
    books:[]
  }
  componentWillMount(){
    axios.get('http://localhost:3000/books').then(( response)=>{
    this.setState({
      books: response.data
    })
    });
  }``

`` ` 
render() {
    let books = this.state.books.map((book) =>
    {
      return
      (
        <tr key={book.id}>
          <td>{book.id}</td>
          <td>{book.title}</td>
          <td>{book.rating}</td>
          <td>
            <Button color="success" size="sm" className="mr-2">Edit </Button>&nbsp;
            <Button color="danger" size="sm">Sil</Button>
          </td>
      </tr>
      )
    });``

`` ` 
 return (
  <div className="App container">
  <h1>Book List</h1><br></br>
  <Table> 
    <thead>
      <tr>
        <th>#</th>
        <th>Title</th>
        <th>Rating</th>
        <th>Actions</th>

      </tr>
    </thead>
    <tbody>
      {books}
    </tbody>
  </Table>

  </div>
);``

Answer 1

您在render方法中缺少return语句。

render() {
     ....
     ...

   return (
      <tbody>
        {books}
      </tbody>
   )
}

Answer 2

尝试这个：

render() {
  const books = this.state.books.map(book => {
    return (
      <tr key={book.id}>
        <td>{book.id}</td>
        <td>{book.title}</td>
        <td>{book.rating}</td>
        <td>
          <Button color="success" size="sm" className="mr-2">
            Edit{' '}
          </Button>
          &nbsp;
          <Button color="danger" size="sm">
            Sil
          </Button>
        </td>
      </tr>
    );
  });

  return <tbody>{books}</tbody>;
}

根据此答案，这是渲染功能中的常见错误。