迹忆客 专注技术分享

在 React 中使用 find() 方法：

1. 在数组上调用 find()。
2. 在每次迭代中，检查元素是否匹配条件。
3. 渲染结果。

const App = () => {
  const employees = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Carl'},
  ];

  const found = employees.find(element => {
    return element.id === 2;
  });

  console.log(found); // 👉️ {id: 2, name: 'Bob'}

  return (
    <div>
      <div>{found && <h2>{found.name}</h2>}</div>
    </div>
  );
};

export default App;

我们传递给 find 方法的函数被数组中的每个元素调用。

如果回调函数返回一个真值，则该方法短路并返回相应的数组元素。如果回调函数从不返回真值，则 find() 方法返回 undefined。

在示例中的函数中，我们检查对象的 id 属性是否等于 2 并返回结果。

const found = employees.find(element => {
  return element.id === 2;
});

console.log(found); // 👉️ {id: 2, name: 'Bob'}

如果条件永远不满足，则 find() 方法返回 undefined，因此我们需要在尝试访问对象的属性之前进行检查。

<div>
  <div>{found && <h2>{found.name}</h2>}</div>
</div>

在访问对象的 name 属性之前，我们使用了逻辑 AND (&&) 运算符，因为如果找到的变量存储了未定义的值，我们会收到运行时错误。

如果左边的值是真值，则逻辑 AND (&&) 运算符返回右边的值。如果找到的变量存储了未定义的值，则运算符将返回 undefined 。

我们可以使用这种方法，因为布尔值、null 和 undefined 都被忽略了。 他们根本不渲染。

下面的 JSX 表达式都没有渲染。

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>