如何修复Array.prototype.map()箭头函数未返回值的ESLint警告？

问题场景 #

拥有如下数据数组：

var json = [
    {
      "id": 1,
      "firstName": "Paul",
      "lastName": "Carr",
      "company": "Foo"
    },
    {
      "id": 2,
      "firstName": "Mary",
      "lastName": "Menan",
      "company": "Foo"
    },
    {
      "id": 3,
      "firstName": "Donal",
      "lastName": "Carr",
      "company": "Bar"
    }
  ];

对应的复选框渲染代码：

<div>
  <input type="checkbox" id="checkbox" checked={isChecked} onChange={checkHandler} />
  <p>{isChecked ? json.map(j => <div>{j.id}, {j.firstName}, {j.lastName}, {j.company}</div>) : json.map(k => {
    if(k.company !== "Bar") {
      <div>{k.id}, {k.firstName}, {k.lastName}, {k.company}</div>
    }
  })}</p>
</div>

需求是：复选框勾选时展示整个数组内容，未勾选时仅展示company不为Bar的条目。当前代码可运行，但触发ESLint警告：

src/App.js
  Line 44:111:  Array.prototype.map() expects a value to be returned at the end of arrow function  array-callback-return

警告原因 #

未勾选状态下的map回调函数存在两个问题：

1. 当k.company !== "Bar"时，箭头函数使用了大括号，但没有用return返回JSX元素，导致该情况实际返回undefined
2. 当k.company === "Bar"时，函数没有任何返回值，违反了map要求每个迭代都必须返回值的规则

两种修正方案 #

方案一：先过滤再映射（推荐，语义更清晰） #

先使用filter筛选出符合条件的元素，再用map渲染，这样map的每个迭代都有明确的返回值：

<div>
  <input type="checkbox" id="checkbox" checked={isChecked} onChange={checkHandler} />
  <p>{
    isChecked 
      ? json.map(j => <div key={j.id}>{j.id}, {j.firstName}, {j.lastName}, {j.company}</div>) 
      : json.filter(k => k.company !== "Bar").map(k => <div key={k.id}>{k.id}, {k.firstName}, {k.lastName}, {k.company}</div>)
  }</p>
</div>

（额外提示：给渲染的列表元素加上key属性，符合React的列表渲染规范，避免另一个ESLint警告）

方案二：在map回调中处理所有返回情况 #

确保map的每个迭代都有返回值，符合条件时返回JSX，不符合时返回null（React会忽略null，不渲染任何内容）：

<div>
  <input type="checkbox" id="checkbox" checked={isChecked} onChange={checkHandler} />
  <p>{
    isChecked 
      ? json.map(j => <div key={j.id}>{j.id}, {j.firstName}, {j.lastName}, {j.company}</div>) 
      : json.map(k => {
          if(k.company !== "Bar") {
            return <div key={k.id}>{k.id}, {k.firstName}, {k.lastName}, {k.company}</div>
          }
          return null
        })
  }</p>
</div>

内容的提问来源于stack exchange，提问作者runnerpaul