与 map 函数反应时出现“no-unused-expressions”错误答案

【问题标题】："no-unused-expressions" error in react with map function与 map 函数反应时出现“no-unused-expressions”错误
【发布时间】：2019-01-11 19:03:26
【问题描述】：

我创建了一个“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});
  }
}

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

请帮帮我。对于结构不正确的问题，我们深表歉意。

【问题讨论】：

除非您使用明确的return，否则它不会返回任何带有花括号的内容。警告是什么？是不是告诉你映射函数返回undefined？

标签： reactjs components es6-map

【解决方案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);

【讨论】：