React如何映射嵌套数组

Question

我正试图为配置程序创建各种按钮，但在让所有按钮生成它们应该在的位置时遇到了麻烦。我已经很接近了，但现在被难住了。如有任何指导，我们将不胜感激！现在，Astra蓝/春绿色填充在Body和Drawer标签下。Dash Pink和Weston Grasscloth根本没有出现在哪里。

const materials = [
{ 
id: 1, 
part: "Body",
material: [
{
id: "Astra Blue",
type: "Lacquer",
diffuse:"image URL", 
normal: "image URL", 
orm: "image URL", 
},
{
id: "Spring Green",
type: "Lacquer",
diffuse:"image URL", 
normal: "image URL", 
orm: "image URL", 
},
],
},
{ 
id: 2, 
part: "Drawer",
material: [
{
id: "Dash Pink",
type: "Lacquer",
diffuse:"image URL", 
normal: "image URL", 
orm: "image URL", 
},
{
id: "Weston Grasscloth",
type: "Grasscloth",
diffuse:"image URL", 
normal: "image URL", 
orm: "image URL", 
},
],
}
];
const [{material}] = materials
return (
<div>
{materials.map((sections, index) => {
return (
<div>
<input
type='radio'
name='accordion'
id={index}
className='accordion__input'/>
<label htmlFor={sections.part} className='materialLabel'>
{sections.part}
</label>
<div>
{material.map((materialName) => {
return (
<button 
key={materialName.id} 
onClick={swapBody} 
className='item' 
value={materialName.diffuse} 
data-value={materialName.normal}
data-value2={materialName.orm}>
{materialName.id}
</button>
);
})}
</div>
</div>

);
})}

我试着创建一个可运行的狙击坑，但我仍然在学习这个堆栈溢出的东西。因此，如果需要的话，我会继续尝试创建一个可工作/简单的演示！

Answer 1

您声明材料错误，因为您不能同时写入字符串和列表的值

type: 'Lacquer' [{ id: 'Astra Blue' <-> [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]

如果进行console.log(materials)，则结果为{ id: 1, section: 'Body', type: undefined }

此外，您在同一个对象中声明了两次id键。

正确的方法应该是：

const materials = [
{id: 1, section: 'Body', type: 'Lacquer', list0: [{ id: 'Astra Blue', list1: [{diffuse:"image URL", normal: "image URL", metallic: "image URL"}], id1: 'Ballet Pink', list2: [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
{id: 2, section: 'Drawer', type: 'Grasscloth', list0: [{ id: 'Weston Grasscloth', list1: [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
];

我为变量选择了随机数。

Answer 2

您的materials声明中有一个错误。type属性在图像数组之前有字符串。

如果您将材料申报更改为，则应该有效

const materials = [
{id: 1, section: 'Body', type: [{ id: 'Astra Blue' [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}], id: 'Ballet Pink' [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
{id: 2, section: 'Drawer', type: [{ id: 'Weston Grasscloth' [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
];