无法使用map-React渲染嵌套对象数组

Question

我的json文件如下结构：

export interface IProject {
name: string;
id: string;
environments: [
{
name: string;
assembled: string;
snapshotversion: string;
}
];
}

下面的函数呈现json数据的列表：

const Project = ({ project }: Props) => {
return (
<Flex flexDirection="column">
<ul>
<li>Project Id: {project.id}</li>
<li>
Environments:{' '}
{project.environments.map((data, index) => {
<Box key={index}>
<li>Name: {data.name}</li>
<li>Assembled: {data.assembled}</li>
<li>Snapshot Version: {data.snapshotversion}</li>
</Box>;
})}
</li>
</ul>
</Flex>
);
};

我能够返回正确的json数据，但不能呈现"中的嵌套属性；"环境"；

Answer 1

您尚未在array.map中返回JSX。要解决此问题，只需将{替换为(。参见包含以下内容的行：project.environments.map

const Project = ({ project }: Props) => {
return (
<Flex flexDirection="column">
<ul>
<li>Project Id: {project.id}</li>
<li>Lifecyle Id: {project.lifecycleName}</li>
<li>
Environments:{' '}
{project.environments.map((data, index) => (
<Box key={index}>
<li>Name: {data.name}</li>
<li>Assembled: {data.assembled}</li>
<li>Snapshot Version: {data.snapshotversion}</li>
</Box>;
))}
</li>
</ul>
</Flex>
);
};

正确的语法是：

{project.environments.map((data, index) => ( <div>some jsx</div>))}

或

{project.environments.map((data, index) => {
return (<div>some jsx</div>)
})}