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

根據此答案，這是渲染功能中的常見錯誤。