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

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

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

根据this answer，这是渲染函数中的常见错误。

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

2 个答案: