如何在 React 中映射对象

作者

在 React 中通过对象进行映射

How to Map through an Object in React

使用Object.keys()方法通过 React 中的对象进行映射，例如
Object.keys(employee).map(). 该Object.keys方法返回一个对象键数组，我们可以在该数组上调用该map()方法。

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

  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: 'Alice',
  salary: 100,
};

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

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

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

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

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

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

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

  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: 'Alice',
    salary: 100,
  };

  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: 'Alice',
  salary: 100,
};

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

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

–

发表评论