javascript - 来自 api 的 JSON 未显示在 ReactJS 渲染方法上

Question

我对 ReactJS 还很陌生，我正在尝试找出为什么我无法显示获取的数据。检查了 Postman 中的数据，它符合预期，所以我确信我缺少一些语法。我没有在这篇文章中放置关键值。

import React, { Component } from 'react'

class Stockstuff extends Component {
    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }

      componentDidMount() {
        fetch("https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=TSLA&apikey=???")
          .then(res => res.json())
          .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },

            (error) => {
              this.setState({
                isLoaded: true,
                error : true
              });
            }
          )
      }


      render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
          return <div>Loading...</div>;
        } else {
          return (
            <ul>
              {items.map(item => (
                <li key={item.name}>
                  {item.name} {item.price}
                </li>
              ))}
            </ul>
          );
        }
      }
}

export default Stockstuff

问题是什么？

Answer 1

端点返回一个对象，而不是数组，这就是为什么您无法映射它。

我通过代码打开此 URL https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=TSLA&apikey=???

虽然对我来说它与 apikey=??? 一起工作很奇怪，但我可以看到类似的东西:

{
    "Meta Data": {
        "1. Information": "Monthly Prices (open, high, low, close) and Volumes",
        "2. Symbol": "TSLA",
        "3. Last Refreshed": "2020-02-21",
        "4. Time Zone": "US/Eastern"
    },
    "Monthly Time Series": {
        "2020-02-21": {
            "1. open": "673.6900",
            "2. high": "968.9899",
            "3. low": "673.5200",
            "4. close": "901.0000",
            "5. volume": "377921898"
        },
        "2020-01-31": {
            "1. open": "424.5000",
            "2. high": "653.0000",
            "3. low": "421.7100",
            "4. close": "650.5700",
            "5. volume": "407621638"
        },
        [...]
    }
}

我稍微更改了代码以匹配数据，一切看起来都很好:

https://codesandbox.io/s/red-mountain-ipn3h