0
87
VisualizaçõesNo se puede renderizar un objeto anidado profundo de dos niveles con el mapa
Estoy trabajando en esta aplicación donde necesito renderizar un objeto anidado de dos niveles de profundidad con un mapa.
Los datos se ven así:
const categories = [ { catName: "Education", subCategory: [ { subCatName: "College" }, { subCatName: "Student" } ] }, { catName: "Motivation", subCategory: [ { subCatName: "Study" } ] } ];He estado tratando de representar estos elementos en dos divisiones separadas con encabezados Categorías para nombres de categoría (catName) y Subcategorías para nombres de subcategoría (subCatName).
En este momento, una categoría aparece en categorías y otra en subcategorías. Además, hay dos títulos de subcategorías. Sé que esto se debe al mapeo anidado, pero no sé cómo puedo separarlos, ya que todos son dinámicos.
Así es como se ve el código:
export default function App() { return ( <div className="App"> <h1>All Categories</h1> <div className="container"> <h2>Categories</h2> {categories.map((item, index) => ( <div> <span>{item.catName}</span> <div className="subcategoriesContainer"> <h4>Subcategories</h4> {item.subCategory.map((el, idx) => ( <span}>{el.subCatName}</span> ))} </div> </div> ))} </div> </div> ); }Aquí está el CodeSandbox . Y así es como se ve ahora:
1 Respostas
Responde à pergunta0
Suponiendo que no necesita mantener la relación entre categorías y subcategorías, usaría el gancho React Memoization para transformar los datos en un formato que permita un JSX más simple.
En mi respuesta simplificada, estoy pasando sus datos json como un accesorio llamado data , luego uso useMemo para crear una propiedad calculada que no cambiará a menos que cambie el accesorio de datos.
const App = ({data})=> { const renderData = React.useMemo(()=> { return data.reduce((acc,item)=> { acc.categories.push(item.catName); acc.subcategories.push(...item.subCategory.map(i=>i.subCatName)); return acc; },{categories:[],subcategories: []}) },[data]); // simplified react code. return ( <div> <h1>Categories</h1> { renderData.categories.map((item,idx)=><span key={item}>{item}</span>) } <h1>Sub Categories</h1> { renderData.subcategories.map((item,idx)=><span key={item}>{item}</span>) } </div> ) }Dependiendo de los requisitos de su aplicación, también puede optar por transformar los datos fuera de su componente (por ejemplo: si está recuperando estos datos a través de una API REST, puede tener sentido transformar allí), en cuyo caso es posible que no necesite usar memorización