在 React 中使用 forEach() 方法

React 1年前 65

forEach() 方法可用于在 React 中的 JSX 代码之外迭代数组。如果我们需要遍历数组并直接在 JSX 代码中呈现其元素，请改用 map() 方法。

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];

  const results = [];

  // ?️ 可以在 JSX 代码之外使用 forEach
   // 如果需要为每个数组元素调用一次函数
  employees.forEach((employee, index) => {
    results.push(
      <div key={index}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  });

  // ?️ 或直接在 JSX 代码中使用 map()
  return (
    <div>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}

      <hr />
      <hr />
      <hr />

      {results}
    </div>
  );
}

当我们需要为数组中的每个元素调用函数时，可以使用 Array.forEach 方法。

但是，forEach() 不能用于直接在 JSX 代码中迭代数组。

forEach() 方法使用数组中的每个元素调用提供的函数，但返回未定义。

直接在我们的 JSX 代码中使用它是没有意义的，因为我们需要返回 JSX 元素而不是 undefined。

我们可以使用 forEach() 方法：

遍历一个数组。
将 JSX 元素推送到新数组中。
渲染 JSX 元素。

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];

  const results = [];

  employees.forEach((employee, index) => {
    results.push(
      <div key={index}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  });

  return <div>{results}</div>;
}

我们不是直接渲染对象的值，而是将每个对象的 JSX 标记推送到结果数组中。

我们可以直接在 JSX 代码中渲染结果数组，因为它是 JSX 元素的数组

要遍历数组并直接在 JSX 代码中呈现其元素，请使用 Array.map 方法。

export default function App() {
  const employees = ['Jiyik', 'Fql', 'Carl'];

  return (
    <div>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

我们传递给 Array.map 方法的函数会为数组中的每个元素调用。

在每次迭代中，我们将最外层元素的 key prop设置为唯一值并渲染该元素。

你也可以像使用 forEach() 方法一样使用 for...of 循环。

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];

  const results = [];

  for (const employee of employees) {
    results.push(
      <div key={employee.id}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  }

  return <div>{results}</div>;
}