ReactJS没有正确地呈现所有JSON元素
ReactJS没有正确地呈现所有JSON元素
提问于 2021-08-26 06:53:36
RectJS并没有呈现所有的UI元素
我正在调用一个返回以下响应的web服务，这是非常简单的。以下是完整的JSON转储
[
{
"id":1,
"ami_info":{
"id":0,
"profile":"default",
"account":"111111111",
"region":"us-east-1",
"ami_id":"ami-028222222",
"name":"Test-AMI",
"default_vpc_id":"vpc-17ba2222",
"creation_date":"2021-08-09T18:01:08.000Z"
},
"instance_id":"id-e223114",
"CommandOutputs":[
{
"Stdout":"Out",
"Stderr":"Error",
"ExitCode":1
},
{
"Stdout":"Out",
"Stderr":"Error",
"ExitCode":1
}
]
}
]呈现像id、instance_id这样的根元素很好。
但是，它无法在HTML中呈现CommandOutputs.Stdout或CommandOutputs.Stderr消息。console.log具有这些值。
这是逻辑的要点。
{
items.map((item, i) => {
let command_outputs = item.CommandOutputs
return (
<tr>
<td> {item.id}</td>
<td>{item.instance_id}</td>
<td>DONE</td>
{
command_outputs.map((c, j) => {
<td>{c.Stdout}</td>
})
}
</tr>
);
})
}它只是显示根元素，而不是如下图所示的嵌套子元素。
完整示例代码
import React, {useState, useEffect} from 'react';
import {DashboardLayout} from '../components/Layout';
import {Table} from "react-bootstrap";
import {useParams} from "react-router-dom";
const ReportPage = () => {
const {id} = useParams();
function Loaddata() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
fetch("http://localhost:10000/getReportById/" + id)
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div>
<Table striped bordered hover>
<thead>
<tr>
<th>id</th>
<th>Instance</th>
<th>STATUS</th>
<th>CommandOutputs</th>
<th>CommandOutputs</th>
<th>CommandOutputs</th>
</tr>
</thead>
<tbody>
{
items.map((item, i) => {
let command_outputs = item.CommandOutputs
return (
<tr>
<td> {item.id}</td>
<td>{item.instance_id}</td>
<td>DONE</td>
{
command_outputs.map((c, j) => {
<td>{c.Stdout}</td>
})
}
</tr>
);
})
}
</tbody>
</Table>
</div>
);
}
}
return (
<DashboardLayout>
<h2> AMI Test Reports </h2>
<Loaddata/>
</DashboardLayout>
)
}
export default ReportPage;Stack Overflow用户
回答已采纳
发布于 2021-08-26 06:56:19
您应该返回映射的元素。别忘了你的反应钥匙。
带返回语句的显式返回函数体
command_outputs.map((c, j) => {
return <td key={j}>{c.Stdout}</td>;
})隐式返回-无函数体
command_outputs.map((c, j) => (
<td key={j}>{c.Stdout}</td>
))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68933823
复制相关文章
相似问题
腾讯云开发者
