ESLint 期望在箭头函数末尾返回回调

Question

我有这个数组：

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

如果选中该框，我希望打印整个数组。如果不是，则只应打印不在公司 Foo 中的人员。但是，当我运行代码时，我得到：

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

我的代码可以工作，但我不确定如何修复它，所以我没有收到 lint 警告。它应该是什么样子？

Answer 1

它期望从

map

函数返回一些东西。 此外，在渲染多个项目时，您需要设置一个

key

值。 另外，您应该使用 IF 根据公司 iso 过滤项目

代码应该看起来像这样

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