如何在 React 中循环遍历一个对象

作者

在 React 中循环遍历一个对象

How to Loop through an Object in React

在 React 中循环一个对象：

  1. 使用该Object.keys()方法获取对象键的数组。
  2. 使用该map()方法遍历键数组。
应用程序.js
export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  };

  return (
    <div>
      {/* 👇️ iterate object KEYS */}
      {Object.keys(employee).map((key, index) => {
        return (
          <div key={index}>
            <h2>
              {key}: {employee[key]}
            </h2>

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

      <br />
      <br />
      <br />

      {/* 👇️ iterate object VALUES */}
      {Object.values(employee).map((value, index) => {
        return (
          <div key={index}>
            <h2>{value}</h2>

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

我们使用
Object.keys
方法获取对象键的数组。

应用程序.js
const employee = {
  id: 1,
  name: 'Bob',
  salary: 123,
};

// 👇️ ['id', 'name', 'salary']
console.log(Object.keys(employee));

// 👇️ [1, 'Bob', 123]
console.log(Object.values(employee));

我们只能在数组上调用
map()
方法，因此我们需要获取对象键的数组或对象的值。

我们传递给
Array.map
方法的函数将使用数组中的每个元素和当前迭代的索引进行调用。

我们在示例中使用了indexfor keyprop，但是如果您有的话，最好使用一个稳定的、唯一的标识符。

当遍历对象的键时，使用对象的键作为
keyprop 是安全的，因为对象中的键保证是唯一的。

应用程序.js
export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  };

  return (
    <div>
      {/* 👇️ iterate object KEYS */}
      {Object.keys(employee).map(key => {
        return (
          <div key={key}>
            <h2>
              {key}: {employee[key]}
            </h2>

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

但是，如果您要遍历对象的值，则不能安全地使用
valuefor属性key，除非您可以确定对象中的所有值都是唯一的。

key出于性能原因，React 在内部使用该prop。它帮助库确保只重新呈现已更改的数组元素。

话虽如此，除非您要处理数以千计的数组元素，否则您不会发现使用和稳定的唯一标识符之间有任何明显区别。 index

在 React 中循环对象的值：

  1. 使用该Object.values()方法获取对象值的数组。
  2. 使用该map()方法迭代值数组。
应用程序.js
export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  };

  return (
    <div>
      {/* 👇️ iterate object VALUES */}
      {Object.values(employee).map((value, index) => {
        return (
          <div key={index}>
            <h2>{value}</h2>

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

我们使用
Object.values
方法获取对象值的数组。

应用程序.js
const employee = {
  id: 1,
  name: 'Bob',
  salary: 123,
};

// 👇️ [1, 'Bob', 123]
console.log(Object.values(employee));

如果您只想呈现对象的值，则可以使用这种方法直接访问它们。

您还可以使用
Object.entries
方法，该方法返回一个键值对数组。

应用程序.js
export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  };

  console.log(Object.entries(employee));

  return (
    <div>
      {Object.entries(employee).map(([key, value]) => {
        return (
          <div key={key}>
            <h2>
              {key}: {employee[key]}
            </h2>

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

下面是该Object.entries()方法的输出结果。

应用程序.js
const employee = {
  id: 1,
  name: 'Bob',
  salary: 123,
};

// 👇️ [
//      ['id', 1],
//      ['name', 'Bob'],
//      ['salary', 123],
// ]
const result = Object.entries(employee);
console.log(result);

该方法返回一个包含键值对子数组的数组。

另一种方法是使用该Array.forEach()方法遍历对象的键并将 JSX 元素推送到我们随后渲染的数组中。

应用程序.js
export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  };

  const results = [];

  Object.keys(employee).forEach(key => {
    results.push(
      <h2 key={key}>
        {key}: {employee[key]}
      </h2>,
    );
  });

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

Array.forEach()每个键都会调用该方法，但是该forEach()
方法会返回undefined，因此我们不能直接在 JSX 代码中使用它。

相反，我们将 JSX 元素推送到我们渲染的数组中。

请注意，这是一种更间接的方法，您不会在 React 应用程序中看到它经常使用。

–

发表评论