时间戳

首页 > 解决方案 > 为什么我只能在首先检查它是否存在之后才能调用它？

javascript - 为什么我只能在首先检查它是否存在之后才能调用它？

问题描述

在我的渲染方法中，如果我首先检查用于获取引用的 getter 方法（基于随机索引）是否存在，我只能成功地从获取的 JSON 引用列表中渲染一个随机引用。这有效：{this.randomQuote ? this.randomQuote.quote : ''}，但如果我只是这样做{this.randomQuote.quote}，我会得到“TypeError：无法读取未定义的属性'quote'。” （请注意，quote 是获取的 JSON 对象数组中每个对象的属性名称。因此 randomQuote 方法根据 randomQuoteIndex() 方法选择的随机索引从 JSON 中选择一个对象，但仅选择 quote 属性在渲染中。）怎么可能只是先检查一下是否this.randomQuote未定义才能让我调用 render this.randomQuote.quote？

这是该类的工作版本：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      quotes: [],
      randomQuoteIndex: null
    }
  }

  componentDidMount() {
    // fetch method uses GET method by default; don't need to specify
    fetch('https://gist.githubusercontent.com/nataliecardot/0ca0878d2f0c4210e2ed87a5f6947ec7/raw/1802a693d02ea086817e46a42413c0df4c077e3b/quotes.json')
      // Takes a JSON response string and parses it into JS object
      .then(response => response.json())
      // state is set to quotes: quotes due to destructuring
      .then(quotes => this.setState({ quotes }, () => {
        this.setState({ randomQuoteIndex: this.randomQuoteIndex() })
      }));
  }

  get randomQuote() {
    return this.state.quotes[this.state.randomQuoteIndex];
  }

  randomQuoteIndex() {
    return random(0, this.state.quotes.length - 1);
  }

  render() {
    return (
      <div className="App" id="quote-box">
        {/* Since this is a get function, can call it as though it were a regular variable. Also, in this.random.quote, quote is the name of a property in each of the fetched JSON quote objects (that are held in an array) */}
        {this.randomQuote ? this.randomQuote.quote : ''}
        <Button
          buttonDisplayName="Next"
          clickHandler={this.buttonClickHandler}
        />
      </div>
    );
  }
}

标签： javascriptreactjs

解决方案

文档：

该componentDidMount()方法在组件输出被渲染到 DOM 之后运行。

...所以第一次渲染时，this.state.randomQuoteIndex是null，this.state.quotes[null]是undefined，undefined.quote是坏的。

如果您签入，您将在第一次渲染中幸存下来，并在组件正确初始化时活着看到组件。

任何时候你有一个组件可能会被裸露和害羞，你要确保它仍然可以正确地渲染一些东西（或者隐藏，或者显示一个微调器或类似的东西，直到它完成修饰）。理想情况下，这将是通过在其状态中显示“我现在不错”的明确标志，而不是通过检查可能undefined由于接近未命中的错误而返回的函数。:)

推荐阅读