Một trong những phương thức mà các nhà phát triển giao diện người dùng sử dụng nhiều nhất trong JavaScript là phương thức Array.prototype.map().

Từ việc phải render danh sách các mục trong DOM đến việc lặp lại một loạt các bài đăng trên blog - và nhiều bài đăng khác - phương thức này thực sự hữu ích.

Giả sử bạn có một danh sách các mục trong một mảng cần được render dưới dạng một thành phần React trên một trang web. Cách lý tưởng để map một loạt các mục trong một mảng trông giống như sau:

const shoppingList = ['Oranges', 'Cassava', 'Garri', 'Ewa', 'Dodo', 'Books']

export default function List() {
  return (
    <>
      {shoppingList.map((item, index) => {
        return (
          <ol>
            <li key={index}>{item}</li>
          </ol>
        )
      })}
    </>
  )
}

Đoạn mã trên đáp ứng khá nhiều mục đích của nó. Nhưng điều gì sẽ xảy ra nếu bạn phải ánh xạ qua một mảng các đối tượng có nhiều thuộc tính? Giả sử, một mảng như bên dưới?

const employees = [
  {
    name: 'Saka Manje',
    address: '14, cassava-garri-ewa street',
    gender: 'Male',
  },
  {
    name: 'Wawawa Warisii',
    address: '406, highway street',
    gender: 'Male',
  },
]

Để ngắn gọn, chúng ta hãy chỉ tâp trung vào hai mục trong mảng. Bây giờ, hãy sử dụng cùng một cách tiếp cận mà chúng ta đã sử dụng trong đoạn mã trước.

export default function EmployeesList() {
  return (
    <>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <p>{employee.name}</p>
            <p>{employee.address}</p>
            <p>{employee.gender}</p>
          </div>
        )
      })}
    </>
  )
}

Mặc dù cách tiếp cận trong đoạn mã trên có vẻ hoàn toàn ổn, nhưng bạn có thể tự hỏi - “Điều gì sẽ xảy ra khi tôi lấy các đối tượng lồng nhau sâu làm dữ liệu từ một endpoint?”

Cách destructure các thuộc tính đối tượng

Trong phần trước, chúng ta đã xem xét cách render dữ liệu thông thường từ một điểm cuối API trên một trang web bằng phương thức .map() của JavaScript.

Trong phần này, chúng ta sẽ xem xét cách chúng ta có thể đạt được kết quả tương tự mà không cần sử dụng ký hiệu dấu chấm để truy cập các thuộc tính trong mảng.

Nhưng, trước khi chúng ta làm điều đó, chính xác thì việc destructure các thuộc tính của đối tượng có nghĩa là gì? Chà, mục đích của việc destructure là có thể truy cập các biến trong mảng hoặc đối tượng và sau đó tiến hành bằng cách gán chúng cho một biến. Bạn có thể xem một ví dụ bên dưới.

const person = {
  name: 'Adrian Tojubole',
  role: 'Lead Engineer',
  salary: '$130k/year',
}

let { name, role, salary } = person

console.log(name); // Adrian Tojubole
console.log(role); // Lead Engineer
console.log(salary); // $130k/year

Bạn sẽ nhận thấy rằng chúng ta có thể truy cập các thuộc tính - name, role và salary - của đối tượng person. Điều này thay vì sử dụng ký hiệu dấu chấm để truy cập chúng, giống như trong đoạn mã bên dưới, điều này làm cho quá trình lặp đi lặp lại đối với chúng tôi.

console.log(person.name);
console.log(person.role);
console.log(person.salary);

Bằng cách này, chúng ta sẽ áp dụng hình mẫu này và sử dụng nó bất cứ khi nào chúng ta muốn sử dụng phương thức .map() trong React. Lấy ví dụ về mảng các đối tượng bên dưới:

const employeesData = [
  {
    name: 'Saka manje',
    address: '14, cassava-garri-ewa street',
    attributes: {
      height: '6ft',
      hairColor: 'Brown',
      eye: 'Black',
    },
    gender: 'Male',
  },
  {
    name: 'Adrian Toromagbe',
    address: '14, kogbagidi street',
    attributes: {
      height: '5ft',
      hairColor: 'Black',
      eye: 'Red',
    },
    gender: 'Male',
  },
]

Trong đoạn mã trên, bạn sẽ nhận thấy rằng chúng ta có một đối tượng được lồng bên trong một đối tượng khác, dưới dạng một thuộc tính. Bây giờ, cách ban đầu bạn có thể truy cập các thuộc tính trong đối tượng lồng nhau đó sẽ giống như sau:

employeesData.map(data => data.attributes.height);

Tuy nhiên, khi bạn destructure các thuộc tính trong đối tượng đó, cú pháp sẽ giống như sau:

employeesData.map(
  ({ name, address, attributes: { height, hairColor, eye }, gender }, index) => {
    return name, address, height, hairColor, eye
  }
)

Đoạn mã trên loại bỏ quá trình thực hiện điều này: worker.name, worker.attributes.height, v.v.

Bây giờ, bạn đã có ý tưởng về cách nó hoạt động, đã đến lúc đặt .map() này vào một React Component, sau đó trả về các thuộc tính tương ứng.

export default function Employees() {
  return (
    <div>
      {employeesData.map(
        (
          { name, address, gender, attributes: { height, hairColor, eye } },
          index
        ) => {
          return (
            <div className="employees" key={index}>
              <p>{name}</p>
              <p>{address}</p>
              <p>{gender}</p>
              <p>{height}</p>
              <p>{eye}</p>
              <p>{hairColor}</p>
            </div>
          )
        }
      )}
    </div>
  )

Kết luận

Với cách tiếp cận này, bạn có thể tiết kiệm rất nhiều thời gian sử dụng ký hiệu dấu chấm để truy cập các thuộc tính của đối tượng. Điều này sẽ trở nên ngày càng có ích, vì bạn có thể bắt đầu giao diện với các API GraphQL và một số API này thường được biết là có các đối tượng lồng nhau sâu được trả về dưới dạng dữ liệu.

Bạn cũng có thể destructure các thuộc tính mảng. Một ví dụ tuyệt vời là cách chúng tôi destructure một giá trị và hàm gọi lại setValue khi chúng tôi đang sử dụng một trong những hook React phổ biến - useState

const [count, setCount] = React.useState(0)

Link bài gốc: https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/