React.js:如何通过嵌套数组进行映射

Question

假设我有一个对象数组(myContacts)，在React中，我可以通过数组的每个对象映射以获得其item和index。我可以使用项目[键]来获得它的值，但如果它的值是另一个数组呢?我怎么映射它呢?

这就是我要做的:

const myContacts = [
{
name: 'John',
hobbies: ['swimming', 'skateboard', 'TV']
},
{
name: 'Sarah',
hobbies: ['Cooking'],
},
{
name: 'Cindy',
hobbies: ['Shopping', 'Running'],
},
];

function MyPeeps({ myContacts }) {
return (
<div>
{myContacts.map((item, index) => {
return (
<div key={index}>
<p>{item.name}</p>
{item.hobbies &&
<ul>
//if there is a hobbies array for this person, then list each as an `li`
</ul>
}
</div>
)
})}
</div>
)
}

Answer 1

一般来说，您可以这样做:

<ul>{item.hobbies.map(i => <li>i</li>)}</ul>

但是一个更好的主意可能是创建一个Contact组件来避免过多的嵌套，然后委托给它:

<div key={index}>
<Contact item={item} />
</div>

Answer 2

您也可以使用item.hobbies.length > 0，如果您确定始终存在的爱好数组。

function MyPeeps({ myContacts }) {
return (
<div>
{myContacts.map((item, index) => {
return (
<div key={index}>
<p>{item.name}</p>
{item.hobbies && (
<ul>
{item.hobbies.map((hobby) => (
<li key={hobby}>{hobby}</li>
))}
</ul>
)}
</div>
);
})}
</div>
);
}

Answer 3

1. 使用map()函数:你可以使用JavaScript内置的map()函数来迭代React中的嵌套数组。map()函数接受一个回调函数作为参数，对数组中的每个元素调用回调函数。您可以使用回调函数访问嵌套数组及其元素。

2. 使用递归:你也可以在React中使用递归来迭代嵌套数组。在这种方法中，您创建一个函数，当它遇到嵌套数组时调用自己。然后，该函数可以访问嵌套数组的元素并返回所需的结果。

下面是一个使用map()在React中迭代嵌套数组的例子:

const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
function App() {
return (
<div>
{nestedArray.map((innerArray) => (
<div>
{innerArray.map((element) => (
<div>{element}</div>
))}
</div>
))}
</div>
);
}

下面是一个在React中使用递归迭代嵌套数组的例子:

const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
function App() {
return (
<div>
{recursiveMap(nestedArray)}
</div>
);
}
function recursiveMap(arr) {
return arr.map((element) => {
if (Array.isArray(element)) {
return recursiveMap(element);
}
return <div>{element}</div>;
});
}

注意:上面的例子只是为了演示，如果你把它复制粘贴到你的代码中，可能无法正常工作。你需要根据你的要求做一些修改。

Answer 4

{item.hobbies.length && (
<ul>
{item.hobbies.map((hobby) => (
<li key={hobby}>{hobby}</li>
))}
</ul>
)}

Answer 5

{ 
item.hobbies.length>0 &&
<ul>
item.hobbies.map((hobby,index)=>{
return <li key={index}>{hobby}</li>
})
</ul>
}