ReactJS无法正确渲染接口返回JSON中CommandOutputs嵌套字段问题

问题原因 #

你代码中嵌套的command_outputs.map箭头函数使用了花括号包裹逻辑，但没有显式返回<td>元素，map遍历后返回的是全为undefined的数组，因此对应位置没有内容渲染。此外列表遍历没有添加key属性，会触发React的警告。

解决方案 #

你可以任选以下任意一种方式修正：

• 方式1：给内层map添加显式return语句，同时补充key属性

command_outputs.map((c, j) => {
    return <td key={j}>{c.Stdout}</td>
})

• 方式2：去掉内层map的花括号，使用箭头函数隐式返回，同时补充key属性

command_outputs.map((c, j) => <td key={j}>{c.Stdout}</td>)

修正后核心渲染代码 #

{
    items.map((item, i) => {
        let command_outputs = item.CommandOutputs
        return (
            <tr key={i}>
                <td> {item.id}</td>
                <td>{item.instance_id}</td>
                <td>DONE</td>
                {
                    command_outputs.map((c, j) => <td key={j}>{c.Stdout}</td>)
                }
            </tr>
        );
    })
}

如果需要同时展示Stderr内容，可在内层map中返回多个<td>元素即可。

内容的提问来源于stack exchange，提问作者anish