"no-unused-expressions" 与地图功能的反应错误

Question

我制作了一个 'App' class 并在子 '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});
  }
}

现在在我的 Todos 组件中的 map 函数中，它不允许我使用花括号，但是如果我用圆括号替换它，就可以了，为什么？

请帮助 me.Sorry 解决结构错误的问题。

Answer 1

如果你使用大括号，那意味着你正在写一个函数，你应该 return 最后 jsx，但是你的代码没有 returning any jsx。所以有效代码是

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

并且带有圆括号的代码可以工作，因为它是写 return 的简写形式。所以基本上用圆括号，你的代码还是这样

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

"no-unused-expressions" 与地图功能的反应错误

"no-unused-expressions" error in react with map function

components

reactjs

es6-map