时间戳

首页 > 解决方案 > 获取和等待后React中的“无法读取未定义的属性”

javascript - 获取和等待后React中的“无法读取未定义的属性”

问题描述

我是 React 的新手，我在获取时遇到了问题：

我一直在做一个反应项目，我必须根据用户选择的公司从五个不同的网址中获取。我已经多次更改代码，但它不会工作。

我尝试使用 componentDidMount （但它只调用一次，并且我想获取许多 url），使用“while（！this.state）”来忙于等待获取数据，然后再分配它等等。

抓取功能：

async fetch_data() {
    var sel = this.props.select;
    symbol = companies[sel];
    url = 'https://www.alphavantage.co/query?function=' + func + '&symbol=' + symbol + '&outputsize=' + osize + '&apikey=' + api_key;
    var response = await fetch(url);
    var data = await response.json();

    while(!data);

    this.setState({data: data, loading: false });
    this.setValues();    
  }

设置值函数（修剪所以它不是那么长）：

setValues() {
    day = this.state.data["Meta Data"]["3. Last Refreshed"];
    open = this.state.data["Time Series (Daily)"][day]["1. open"];
    higher = this.state.data["Time Series (Daily)"][day]["2. high"];
  }

渲染功能（也修剪）：

render() {

    this.fetch_data();
    if(this.state.loading || !this.state || !this.state.data) {
      return <div>Loading :D...</div>
    } else {
      return (
        <div>
          <h2>Symbol: {symbol}</h2>
          <p>Url: {url}</p>
          <ul>
            <li>
              Open price: {open}
            </li>
            <li>
              Higher price: {higher}
            </li>
          </ul>
        </div>
      );
    }
  }

实际上，当用户选择公司时，我已经完成了该部分，并且符号（和 url）发生了变化……但问题是，例如，当程序想要访问this.state.data["Time Series (Daily)"][day]["1. open"];时，它会崩溃，因为它正在获取和接收数据。

错误说：

Unhandled Rejection (TypeError): Cannot read property '3. Last Refreshed' of undefined:

  42 | setValues() {
> 43 |   day = this.state.data["Meta Data"]["3. Last Refreshed"];
     | ^  44 |   open = this.state.data["Time Series (Daily)"][day]["1. open"];
  45 |   higher = this.state.data["Time Series (Daily)"][day]["2. high"];

该应用程序并不总是崩溃，它会显示结果，但是渲染组件会一直调用 this.fetch_data() 并且它会崩溃，因为有时（比如 80% 的时间）数据还没有到达，我正在尝试访问它。

标签： javascriptjsonreactjsfetch

解决方案

我找到了一个解决方案：

只需在渲染中的 return 之前放置一个 if 语句，说“符号是否已更改？如果是，则获取，否则不要”

推荐阅读