如何访问已经在 Javascript 中解析的 JSON 对象？答案

【问题标题】：How to access a JSON object that's already been parsed in Javascript?如何访问已经在 Javascript 中解析的 JSON 对象？
【发布时间】：2021-07-15 03:08:34
【问题描述】：

我制作了这个代码沙盒来解释我遇到的问题。我在底部添加了 cmets，当您将 {buyDate.id} 更改为 {buyDate.market_data.current_price.usd} 时。你会看到我遇到的问题。我相信它已正确获取，并且控制台显示了我的期望。这是代码沙箱：codesandbox.io/s/coingecko-api-example22-9zysm?file=/src/App.js

任何帮助将不胜感激！

这是原帖：

我查看了类似问题的其他答案，但没有解决我遇到的问题。这是 ReactJS。

我设置了以下变量：

const [trade, setTrade] = useState({
   sellData: {},
   buyData: {},
 });

当我使用我想要的正确输入来控制台记录 buyData 时，我会收到以下信息：

buyData: 
{id: "bitcoin", symbol: "btc", name: "Bitcoin", image: {…}, market_data: {…}, …}
community_data: {facebook_likes: null, twitter_followers: 68912, reddit_average_posts_48h: 7.833, reddit_average_comments_48h: 270.833, reddit_subscribers: 1303941, …}
developer_data: {forks: 25238, stars: 42377, subscribers: 3497, total_issues: 5257, closed_issues: 4491, …}
id: "bitcoin"
image: {thumb: "https://assets.coingecko.com/coins/images/1/thumb/bitcoin.png?1547033579", small: "https://assets.coingecko.com/coins/images/1/small/bitcoin.png?1547033579"}
market_data:
current_price:
aed: 32711.28293095498
ars: 553792.3126161147
...

所以，当我调用 trade.buyData.market_data.current_price.aed 应该可以工作时，我收到 TypeError: Cannot read property 'current_price' of undefined 的错误，但我希望它返回 32711.28293095498。

我尝试将 trade.buyData 的设置值从 {} 更改为其他类型，例如 NaN 或 undefined。我还尝试添加捕获错误消息，但没有任何效果。在某一时刻，它无缘无故地工作了一半。

任何帮助将不胜感激。

【问题讨论】：

没有看到market_data的任何值
market_data 必须是上述数据示例中的对象。你错过了什么吗？
您甚至没有为 market_data 指定值
对状态和变量要非常小心。状态与变量并不完全相同。当您setTrade() 时，trade 的值不会立即更改。此外，请始终记住复制您的 trade 对象，而不是直接更新对象。例如。 setTrade({ trade ..., sellData: xxx }) 如果不是，您会看到奇怪的行为。 React 类或函数中的所有变量在每次完成渲染时都会被销毁。状态将值（不是变量）保存在一些临时存储中，并在下次渲染时重新加载它们，所以感觉就像变量，但状态不是正常的 js vars
@slebetman，是的，我有一个 fetch 函数可以在 setTrade({ ...trade, buyData: jsonData }); 处执行此操作。为什么我需要声明market_data？这不是 api 返回的对象，我可以使用 .market_data 然后 .current_price 然后 .aed 调用它，如控制台记录它时所示？

标签： javascript json reactjs object

【解决方案1】：

查看您的 codeSandbox 后，很明显您在 buyData 上有一个空指针，因为您将对象定义为空并尝试在渲染过程中访问它的属性（在本例中为初始渲染）。

您可以在代码沙箱的第 27 行的 market_data 中使用 optional chaining operator (?.) 修复它 - buyDate.market_data?.current_price.usd

return (
    <div className="App">
      <input defaultValue={buyDate} onChange={(val) => handleBuyChange(val)} />
      {/* market_data needs to be null checked */}
      {buyDate.market_data?.current_price.usd}
      <h4>
        The purpose of this project is to input the date and get back the
        bitcoin price at the time
      </h4>
    </div>
  );

【讨论】：

@shidog12345 乐于助人:)