[英]Why isn't jsonData reading the file?
i have a json file:我有一个 json 文件:
[ {
"symbol" : "SPY",
"type" : "etf"
}, {
"symbol" : "CMCSA",
"type" : "stock"
}, {
"symbol" : "KMI",
"type" : "stock"
}, {
"symbol" : "INTC",
"type" : "stock"
}, {
"symbol" : "MU",
"type" : "stock"
},
...
And I'm trying to read it into the table:我正在尝试将其读入表格:
const Home = () =>{
const displayStockCodes = (info) =>{
JsonData.map(
(info)=>{
return(
<tr>
<td>{info.symbol}</td>
<td>{info.type}</td>
</tr>
)
}
);
};
return (
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Symbol</th>
<th>Type</th>
</tr>
</thead>
<tbody>
{displayStockCodes}
</tbody>
</table>
</div>
);
};
export default Home;
I tried to do it according to the guide, but in the end only Symbol
and Type
are displayed on the page, and the data itself is not output.我试着按照指南去做,但最终页面上只显示了
Symbol
和Type
,数据本身并没有输出。 Maybe I need to add something else?也许我需要添加其他东西?
displayStockCodes
is a function but you are not calling it in the tbody
you need to call that function. displayStockCodes
是一个函数,但您没有在需要调用该函数的tbody
中调用它。
displayStockCodes
also doesn't return anything you need to ensure it returns some JSX
code. displayStockCodes
也不返回任何你需要的东西来确保它返回一些JSX
代码。
const Home = () =>{
const displayStockCodes = (info) =>{
// 2. you need to return
return JsonData.map(
(info)=>{
return(
<tr>
<td>{info.symbol}</td>
<td>{info.type}</td>
</tr>
)
}
);
};
return (
<div>
<table className="table table-striped"> <!-- use className here instead of class -->
<thead>
<tr>
<th>Symbol</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<!-- you need to call this -->
{displayStockCodes()}
</tbody>
</table>
</div>
);
};
export default Home;
const Home = () => {
const JsonData = [
{
symbol: 'SPY',
type: 'etf',
},
{
symbol: 'CMCSA',
type: 'stock',
},
{
symbol: 'KMI',
type: 'stock',
},
{
symbol: 'INTC',
type: 'stock',
},
{
symbol: 'MU',
type: 'stock',
},
];
const displayStockCodes = () => {
return JsonData.map((info) => (
<tr>
<td>{info.symbol}</td>
<td>{info.type}</td>
</tr>
));
};
return (
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Symbol</th>
<th>Type</th>
</tr>
</thead>
<tbody>{displayStockCodes()}</tbody>
</table>
</div>
);
};
export default Home;
The output:输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.