Cách ánh xạ qua một mảng lồng nhau trong một thành phần React

Hầu hết các ứng dụng hiện đại sử dụng dữ liệu bên ngoài từ các ứng dụng và công cụ khác thông qua API. Dữ liệu này có trong tất cả các loại lược đồ và tùy thuộc vào bạn để giải cấu trúc nó cho đến khi bạn nhận được những gì bạn muốn sử dụng. Trong số các lược đồ này có các đối tượng dữ liệu chứa các mảng lồng nhau. Nó có thể là một thách thức để hiển thị loại dữ liệu này. Bài viết này sẽ hướng dẫn bạn cách ánh xạ qua một mảng lồng nhau trong một thành phần React.

Sử dụng chức năng bản đồ

Hàm ánh xạ lặp qua các mục của một mảng nhất định và trả về câu lệnh hoặc mã được chỉ định cho mỗi mục.

Đối với một mảng phẳng, hàm bản đồ hoạt động như sau:

const arr = ['a', 'b', 'c'];
const result1 = arr.map(element => {
return element;
});

Trong React, bạn phải bao bọc hàm bản đồ bằng dấu ngoặc nhọn và sử dụng hàm mũi tên để trả về một phần tử nút cho mỗi lần lặp. Các mục trong mảng phẳng ở trên có thể được hiển thị dưới dạng các phần tử JSX như sau:

const arr = ['a', 'b', 'c']; 
function App () {
return (
<>
{arr.map((item, index) => {
<span key={index}>{a}</span>
})}
</>
)
}

Lưu ý rằng bạn chỉ định một khóa cho mỗi phần tử mà hàm bản đồ trả về. Điều này giúp React xác định các mục đã được thay đổi hoặc loại bỏ. Đây là điều quan trọng trong quá trình hòa giải.

Ánh xạ qua một mảng lồng nhau trong một thành phần React

Một mảng lồng nhau tương tự như một mảng chứa một mảng khác. Ví dụ, mảng công thức sau đây chứa một đối tượng với một mảng.

const recipes = [
{
id: 716429,
title: "Pasta with Garlic, Scallions, Cauliflower & Breadcrumbs",
image: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
dishTypes: [
"lunch",
"main course",
"main dish",
"dinner"
],
recipe: {
}
}
]

Đối với dữ liệu như thế này với các mảng lồng nhau, bạn nên sử dụng một hàm bản đồ cho mỗi mảng.

Trong ví dụ này, bạn sẽ ánh xạ trên mảng dữ liệu như được hiển thị bên dưới:

export default function Recipes() {
return (
<div>
{recipes.map((recipe) => {
return <div key={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="recipe image" />
{recipe.dishTypes.map((type, index) => {
return <span key={index}>{type}</span>
})}
</div>
})}
</div>
)
}

Thành phần Recipes sẽ hiển thị div phần tử chứa dữ liệu công thức cho từng công thức trong mảng công thức.

Làm việc với mảng trong JavaScript

JavaScript cung cấp nhiều phương thức mảng giúp làm việc với mảng đơn giản hơn. Bài viết này trình bày cách hiển thị dữ liệu từ một mảng lồng nhau bằng phương pháp mảng bản đồ. Ngoài bản đồ, cũng có các phương pháp giúp bạn đẩy dữ liệu vào một mảng, nối hai mảng hoặc thậm chí sắp xếp một mảng.