React中如何渲染this.state.apiData数组内的对象总数量

你要实现的需求非常简单，直接读取this.state.apiData.length就能拿到接口返回的股票总数量，这个值会随着state更新自动同步，完全满足后续做条件格式化的要求。

具体修改步骤 #

• 在页面合适位置（示例放在h1标题下方、表格上方）插入长度展示代码即可，同时可以直接绑定行内样式或者类名实现条件格式化
• 条件格式化可以通过三元运算符或者封装样式判断函数实现，可灵活调整规则

核心修改代码示例 #

你只需要替换原代码中接口请求成功后的render分支即可：

else {
  // 提前把总长度存为变量，方便后续多处使用
  const stockTotal = this.state.apiData.length
  // 条件格式化样式规则示例，可按需修改阈值和样式
  const getTotalStyle = () => {
    if (stockTotal === 0) return { color: '#999', fontWeight: 'normal' }
    if (stockTotal < 10) return { color: '#ed6c02', fontWeight: 'bold' }
    if (stockTotal >= 100) return { color: '#2e7d32', fontWeight: 'bold' }
    return { color: '#1976d2', fontWeight: 'bold' }
  }
  return (
    <div className="App">
      <div className="StocksTable">
        <h1>CS385 - Stocks API Display</h1>
        {/* 新增总数量展示，自带条件格式化样式 */}
        <p style={getTotalStyle()} className="stock-total">
          接口返回的股票总数量：{stockTotal} 只
        </p>
        <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 key={s.stockID}>
                {/* 注意：原代码写的是s.StockID，和你提供的示例数据里的stockID（首字母小写）不一致，建议修正避免报错 */}
                <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>
  );
}

补充说明 #

如果你不想用行内样式，也可以通过判断stockTotal的值动态绑定class，再在CSS文件里写对应类的样式即可，更适合复杂的条件格式化规则。

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