可以记录更新的值，但无法使用mobx流呈现它

Question

我正在尝试进行一个非常简单的api调用，没有任何逻辑，我在控制台中得到一个名为‘all.Althoough’的难以辨认的对象(也不是预期的)，我不能在render()方法中返回任何东西，它抛出了一个typeError。我的代码：

`Store:



import {observable, configure, action,flow, computed, decorate, set, runInAction} from 'mobx';
import {observer, inject} from 'mobx-react'
configure({enforceActions:'observed'})

class GenStore {
  verseData = []
  state = "pending"

  getVerseData = flow(function*() {
      this.verseData = []
      this.state = "pending"
      try {
          const response = yield fetch('https://api.quranwbw.com/2/10') 
          const data = response.json()
          this.state = "done"
          this.verseData = data 
      } catch (error) {
          this.state = "error"
      }
  })
}

decorate(GenStore, {state:observable, verseData: observable, getVerseData:action})

  export default new GenStore()

Retrieval:

import {observable, configure, action,flow, computed, decorate, set, runInAction} from 'mobx';
  import { computedFn } from "mobx-utils"
  import {observer, inject} from 'mobx-react'
  import React from 'react'
  import GenStore from './GenStore'

class Show extends React.Component{
    componentDidMount(){
      this.props.GenStore.getVerseData()
    }
    render(){
      console.log(this.props.GenStore.verseData)
    return <h1>{this.props.GenStore.verseData.words[0].word_arabic}</h1>
    }
  }
  export default inject('GenStore')(observer(Show))

尝试呈现时返回错误: TypeError:无法读取未定义的属性'0‘

任何帮助都将不胜感激。提前谢谢。哦，如果您对如何实现此调用有任何建议(如果您认为flow不是选择方法)，请建议我，并告诉我如何做得最好。

Answer 1

因为getVerseData是异步函数，并且当组件第一次呈现时，verseData是一个空数组(为什么它是空数组呢？它应该是空对象)，verseData.words是未定义的。

您可以做几件事来处理它，例如，检查verseData.words是否存在，如果不存在，则显示一些加载器组件。