在 React 中使用 forEach() 方法

作者

在 React 中使用 forEach() 方法

Using the forEach() method in React

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

应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];

  const results = [];

  // 👇️ can use forEach outside of your JSX code
  // if you need to call a function once for each array element
  employees.forEach((employee, index) => {
    results.push(
      <div key={index}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

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

  // 👇️ or map() directly in your JSX code
  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()方法使用数组中的每个元素调用提供的函数，但返回undefined.

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

您可以使用该forEach()方法来：

  1. 遍历一个数组。
  2. 将 JSX 元素推送到一个新数组中。
  3. 渲染 JSX 元素。
应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {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 标记推送到一个results数组中。

我们可以直接在 JSX 代码中渲染results数组，因为它是一个 JSX 元素数组

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

应用程序.js
export default function App() {
  const employees = ['Alice', 'Bob', 'Carl'];

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

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

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

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

您还可以使用与

我们使用方法类似的方式使用for…offorEach()循环。

应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {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>;
}

循环也可for...of用于迭代对象数组。

当您必须使用关键字过早退出循环时，您可以使用for...ofinstead of方法。forEach() break

break关键字不能在方法中使用，forEach()但在for...of循环中是支持的。

–

发表评论