在 React 中使用 find() 方法

在 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>
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 在 React 中使用 find() 方法