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

Question

我有一些 JSON 试图在 React 中访问并从中获取特定数据，但我只想从数组中的第一个元素（最近的财务数据）中提取数据数据）。我有组件上的道具，但无法弄清楚如何获得我需要的东西。例如，如果我想访问 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

试试这个

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

或者，如果您在项目中使用 babel，这个也可以：

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

有关 Optional Chaining 的更多信息，请点击此处。

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

Access Objects within a JSON Array in a React Component

arrays

json

reactjs

react-props