使用地圖功能時出現“ no-unused-expressions”錯誤

Question

我制作了一個“ App”類，並在一個子“ Todos”組件中通過了狀態作為道具。

看一下我的代碼：

class App extends Component {

  state = {
  todos:[
    {
      id:1,
      title:'task1',
      complete:false,
    },{
      id:2,
      title:'task2',
      complete:false,
    },{
      id:3,
      title:'task3',
      complete:false,
    }
  ]
}

render() {
  return (
    <div className="App">
      <Todos todos={this.state.todos}/>
    </div>
  );
 }
}

我的Todos組件：

class Todos extends Component {
  render() {
    return this.props.todos.map((list)=>{list.title});
  }
}

現在在map函數的Todos組件內部，不允許我使用花括號，但是如果我用圓括號替換它，那很好，為什么？

請幫助我。對於結構錯誤的問題，我們深表歉意。

Answer 1

如果使用花括號，則意味着您正在編寫一個函數，並且應該最后返回一些jsx ，但是您的代碼沒有返回任何jsx 。 所以有效的代碼是

return this.props.todos.map((list)=>{ return list.title});

並且帶有圓括號的代碼可以正常工作，因為這是寫退貨的捷徑。 因此，基本上使用圓括號，您的代碼仍然像這樣

return this.props.todos.map((list)=>{ return list.title});

一些有效的方法：

return this.props.todos.map((list)=>{ return list.title});

return this.props.todos.map((list)=> list.title);