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

【问题标题】：Access Objects within a JSON Array in a React Component在 React 组件中访问 JSON 数组中的对象
【发布时间】：2020-08-29 23:37:34
【问题描述】：

我有一些 JSON 试图在 React 中访问并从中获取特定的数据，但我只想从数组中的第一个元素（最新的财务数据）中提取。我有组件上的道具，但不知道如何获得我需要的东西。例如，如果我想访问 debtRatios。我尝试像使用 stock 组件一样使用 map，但它返回为未定义。理想情况下，我希望将 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>

【问题讨论】：

标签： arrays json reactjs react-props

【解决方案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的信息在这里。

【讨论】：

完美！非常感激。我一定会查看您提供的链接。