reactjs - 如何渲染数组中的对象总数反应
问题描述
只是想知道我该怎么做,在输出屏幕上呈现 this.state.apiData 数组的总长度。所以我可以继续对输出的结果使用条件格式。
用户可以看到返回的库存对象的总数。吨
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
// create three state variables.
// apiData is an array to hold our JSON data
// isFetched indicates if the API call has finished
// errorMsg is either null (none) or there is some error
this.state = {
apiData: [],
isFetched: false,
errorMsg: null
};
}
// componentDidMount() is invoked immediately after a
// component is mounted (inserted into the tree)
async componentDidMount() {
try {
const API_URL =
"#";
// Fetch or access the service at the API_URL address
const response = await fetch(API_URL);
// wait for the response. When it arrives, store the JSON version
// of the response in this variable.
const jsonResult = await response.json();
// update the state variables correctly.
this.setState({ apiData: jsonResult.stockData });
this.setState({ isFetched: true });
} catch (error) {
// In the case of an error ...
this.setState({ isFetched: false });
// This will be used to display error message.
this.setState({ errorMsg: error });
} // end of try catch
} // end of componentDidMount()
// Remember our three state variables.
// PAY ATTENTION to the JSON returned. We need to be able to
// access specific properties from the JSON returned.
// Notice that this time we have three possible returns for our
// render. This is conditional rendering based on some conditions
render() {
if (this.state.errorMsg) {
return (
<div className="error">
<h1>We're very sorry: An error has occured in the API call</h1>
<p>The error message is: {this.state.errorMsg.toString()}</p>
</div>
); // end of return.
} else if (this.state.isFetched === false) {
return (
<div className="fetching">
<h1>We are loading your API request........</h1>
<p>Your data will be here very soon....</p>
</div>
); // end of return
} else {
// we have no errors and we have data
return (
<div className="App">
<div className="StocksTable">
<h1>CS385 - Stocks API Display</h1>
<table border="1">
<thead>
<tr>
<th>stock ID</th>
<th>Industry</th>
<th>Sector</th>
<th>Symbol</th>
<th>Name</th>
<th>Buy</th>
<th>Sell</th>
<th>Timestamp</th>
</tr>
</thead>
<tbody>
{this.state.apiData.map((s) => (
<tr>
<td>{s.StockID}</td>
<td>{s.stock.industry}</td>
<td>{s.stock.sector}</td>
<td>{s.stock.symbol}</td>
<td>{s.stock.name}</td>
<td>{s.rates.buy}</td>
<td>{s.rates.sell}</td>
<td>{s.rates.timestamp}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
); // end of return
} // end of the else statement.
} // end of render()
} // end of App class
export default App;
这是我的数组对象之一的示例:
{"stockData":
[
{
"stockID":1,
"stock":
{
"industry":"Investment Bankers/Brokers/Service",
"sector":"Finance",
"symbol":"JMP",
"name":"JMP Group LLC"
},
"rates":
{
"buy":12.6,
"sell":393.11,
"timestamp":"2024-06-05 19:12:01"
}
},
{
"stockID":2,
"stock":
{
"industry":"Investment Bankers/Brokers/Service",
"sector":"Finance",
"symbol":"USOI",
"name":"Credit Suisse AG"
},
"rates":
{
"buy":363.49,
"sell":14.15,
"timestamp":"2024-08-30 13:37:23"
}
},
谢谢!
解决方案
也许size属性会对此有所帮助?
所以可能是这样的:
let objAmount = this.state.apiData.size
甚至只是
this.state.apiData.size
,如果您不想使用变量。
推荐阅读
- spring - 如何以编程方式覆盖 xml 文件中设置的 ehcache 配置?或者如何将 CacheLoaderWriter bean 设置为 ehcache xml 配置?
- rust - 为什么我们需要为 Option 调用 take()
多变的 - javascript - 如何查看特定操作后运行的代码?
- python - Python file.read 使用比文件大小更多的 RAM
- python - 如何从 zeep 响应中提取 XML
- python - 数据框日期字段中的空值,如何跳过它以格式化为日期
- python - 从另一个字典值分配字典值
- python - 使用 Openpyxl 按唯一列值拆分 Excel 工作表
- c# - C#:将 ListBox 项绑定到 API 调用的属性
- php - Android MySQL:将图像存储在数据库中