在 React 中循环遍历对象数组

作者

在 React 中循环对象数组

Loop through an Array of Objects in React

在 React 中循环对象数组：

  1. 使用该map()方法遍历数组。
  2. 您传递给的函数map()会为数组中的每个元素调用。
  3. 该方法返回一个新数组，其中包含传入函数的结果。
应用程序.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'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  return (
    <div>
      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

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

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

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

您还可以解构对象的属性，使您的代码更易于阅读。

应用程序.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'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

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

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

我们解构了对象参数的参数，因此我们不必访问对象上的每个属性。

或者，您可以使用
Array.forEach
方法。

在 React 中循环对象数组：

  1. 使用该forEach()方法遍历数组。
  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'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  const results = [];

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

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

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

这个例子达到了同样的结果。

我们传递给forEach()方法的函数被数组中的每个元素（对象）调用。

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

最后一步是呈现结果数组。

您还可以使用for…of循环遍历对象数组

。

应用程序.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'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  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循环中是支持的。

–

发表评论