Rendering Lists

Hiển thị dữ liệu từ mảng

Giả sử bạn có một danh sách nội dung.

<ul>
  <li>Creola Katherine Johnson: nhà toán học</li>
  <li>Mario José Molina-Pasquel Henríquez: nhà hóa học</li>
  <li>Mohammad Abdus Salam: nhà vật lý</li>
  <li>Percy Lavon Julian: nhà hóa học</li>
  <li>Subrahmanyan Chandrasekhar: nhà vật lý thiên văn</li>
</ul>

Sự khác biệt duy nhất giữa các mục danh sách đó là nội dung của chúng, dữ liệu của chúng. Bạn thường cần hiển thị một số phiên bản của cùng một component bằng cách sử dụng dữ liệu khác nhau khi xây dựng giao diện: từ danh sách các bình luận đến thư viện ảnh hồ sơ. Trong những tình huống này, bạn có thể lưu trữ dữ liệu đó trong các đối tượng và mảng JavaScript và sử dụng các phương thức như map() và filter() để hiển thị danh sách các component từ chúng.

Dưới đây là một ví dụ ngắn gọn về cách tạo danh sách các mục từ một mảng:

1. Di chuyển dữ liệu vào một mảng:

const people = [
  'Creola Katherine Johnson: nhà toán học',
  'Mario José Molina-Pasquel Henríquez: nhà hóa học',
  'Mohammad Abdus Salam: nhà vật lý',
  'Percy Lavon Julian: nhà hóa học',
  'Subrahmanyan Chandrasekhar: nhà vật lý thiên văn'
];

2. Ánh xạ các thành viên people vào một mảng mới các nút JSX, listItems:

const listItems = people.map(person => <li>{person}</li>);

3. Trả về listItems từ component của bạn được bao bọc trong một thẻ <ul>:

return <ul>{listItems}</ul>;

Đây là kết quả:

Lưu ý sandbox ở trên hiển thị một lỗi trong bảng điều khiển:

Bạn sẽ học cách sửa lỗi này sau trên trang này. Trước khi chúng ta đi đến đó, hãy thêm một số cấu trúc vào dữ liệu của bạn.

Lọc mảng các mục

Dữ liệu này có thể được cấu trúc hơn nữa.

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chemist',  
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

Giả sử bạn muốn một cách để chỉ hiển thị những người có nghề nghiệp là 'chemist'. Bạn có thể sử dụng phương thức filter() của JavaScript để chỉ trả về những người đó. Phương thức này lấy một mảng các mục, chuyển chúng qua một “bài kiểm tra” (một hàm trả về true hoặc false) và trả về một mảng mới chỉ gồm những mục đã vượt qua bài kiểm tra (trả về true).

Bạn chỉ muốn các mục mà profession là 'chemist'. Hàm “kiểm tra” cho việc này trông giống như (person) => person.profession === 'chemist'. Đây là cách để kết hợp nó:

1. Tạo một mảng mới chỉ gồm những người là “chemist”, chemists, bằng cách gọi filter() trên people lọc theo person.profession === 'chemist':

const chemists = people.filter(person =>
  person.profession === 'chemist'
);

2. Bây giờ ánh xạ trên chemists:

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       known for {person.accomplishment}
     </p>
  </li>
);

3. Cuối cùng, trả về listItems từ component của bạn:

return <ul>{listItems}</ul>;

const listItems = chemists.map(person =>
  <li>...</li> // Trả về ngầm định!
);

const listItems = chemists.map(person => { // Dấu ngoặc nhọn
  return <li>...</li>;
});

Giữ các mục danh sách theo thứ tự với key

Lưu ý rằng tất cả các sandbox ở trên đều hiển thị một lỗi trong bảng điều khiển:

Bạn cần cung cấp cho mỗi mục trong mảng một key — một chuỗi hoặc một số nhận dạng duy nhất nó giữa các mục khác trong mảng đó:

<li key={person.id}>...</li>

Các key cho React biết mục mảng nào mà mỗi component tương ứng, để nó có thể khớp chúng sau này. Điều này trở nên quan trọng nếu các mục trong mảng của bạn có thể di chuyển (ví dụ: do sắp xếp), được chèn hoặc bị xóa. Một key được chọn tốt sẽ giúp React suy ra chính xác những gì đã xảy ra và thực hiện các cập nhật chính xác cho cây DOM.

Thay vì tạo các key một cách nhanh chóng, bạn nên đưa chúng vào dữ liệu của mình:

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

Nơi để lấy key của bạn

Các nguồn dữ liệu khác nhau cung cấp các nguồn key khác nhau:

• Dữ liệu từ cơ sở dữ liệu: Nếu dữ liệu của bạn đến từ cơ sở dữ liệu, bạn có thể sử dụng các key/ID của cơ sở dữ liệu, vốn dĩ là duy nhất.
• Dữ liệu được tạo cục bộ: Nếu dữ liệu của bạn được tạo và lưu trữ cục bộ (ví dụ: ghi chú trong một ứng dụng ghi chú), hãy sử dụng một bộ đếm tăng dần, crypto.randomUUID() hoặc một gói như uuid khi tạo các mục.

Các quy tắc của key

• Các key phải là duy nhất giữa các anh chị em. Tuy nhiên, bạn có thể sử dụng cùng một key cho các nút JSX trong các mảng khác nhau.
• Các key không được thay đổi nếu không điều đó sẽ phá vỡ mục đích của chúng! Không tạo chúng trong khi hiển thị.

Tại sao React cần các key?

Hãy tưởng tượng rằng các tệp trên màn hình của bạn không có tên. Thay vào đó, bạn sẽ tham khảo chúng theo thứ tự của chúng — tệp đầu tiên, tệp thứ hai, v.v. Bạn có thể làm quen với nó, nhưng một khi bạn xóa một tệp, nó sẽ trở nên khó hiểu. Tệp thứ hai sẽ trở thành tệp đầu tiên, tệp thứ ba sẽ là tệp thứ hai, v.v.

Tên tệp trong một thư mục và các key JSX trong một mảng phục vụ một mục đích tương tự. Chúng cho phép chúng ta xác định duy nhất một mục giữa các anh chị em của nó. Một key được chọn tốt cung cấp nhiều thông tin hơn vị trí trong mảng. Ngay cả khi vị trí thay đổi do sắp xếp lại, key cho phép React xác định mục trong suốt vòng đời của nó.