时间戳

首页 > 解决方案 > 可以记录更新的值，但不能用 mobx 流渲染它

react-native - 可以记录更新的值，但不能用 mobx 流渲染它

问题描述

我试图在没有任何逻辑的情况下进行一个非常简单的 api 调用。尽管我在租赁的控制台中得到一个名为“代理”的难以辨认的对象（也不是预期的），但我无法在 render() 方法中返回任何内容，它会抛出一个类型错误。我的代码：

`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: Cannot read property '0' of undefined

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

标签： react-nativefetchyieldmobxflow

解决方案

因为getVerseData是异步函数，并且组件第一次渲染时verseData是一个空数组（为什么它是空数组？它应该是空对象）并且分别verseData.words是未定义的。

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

推荐阅读