在React组件中的JSON数组内访问对象

Question

我在React中尝试访问一些JSON并从中获取特定数据，但是我只想从数组的第一个元素中提取（最新的财务数据）。 我在组件上有道具，但无法弄清楚如何获得所需的东西。例如，如果我要访问 debtRatios 。我已经尝试过使用地图，就像对 stock 组件所做的那样，但是返回时未定义。理想情况下，我想将 ratio [0] 中的数据作为 ratioInfo 组件上的道具。

<div className="stock-container">
    <div className="stock">
        {props.stock.map(stock => (
            <UserStock key={stock.symbol} stock={stock}/>
        ))}
    </div>
    <div className="ratioInfo">
        <UserStockRatios ratios={props.ratios}/>
    </div>
</div>

Answer 1

尝试一下

localhost

或者，如果您在项目中使用babel，则该项目也可能会起作用：

<div className="ratioInfo">
  {props.ratios.length > 0 && <UserStockRatios ratios={props.ratios[0]}/>}
</div>

此处有关Optional Chaining的更多信息。