Question

我正在重建我之前使用React Native在Swift中创建的应用。这是一个简单的地图，在这个阶段有针脚。它使用虚拟数据呈现，我可以从Parse成功查询数据，但我不知道如何映射它而不会失败，因为我在使用语法检查查询是否已完成时遇到问题。我相信，关键在于理解React状态和Javascript / JSX语法 - 指导赞赏。

相关代码：

var testApp = React.createClass({
  mixins: [ParseReact.Mixin],
  getInitialState() {
    return {
      mapRegion: {
        latitude: 22.27,
        longitude: 114.17,
        latitudeDelta: 0.2,
        longitudeDelta: 0.2,
      },
      annotations: null,
      isFirstLoad: true,
    };
  },

  componentDidMount: function() {
    this.setState({isLoading: true});
  },

  render() {
    // console.log(this.data.sites); // this works without the below
    return (
      <View>
      <MapView
      style={styles.map}
      region={this.state.mapRegion || undefined}
      annotations={this.state.data.sites.map(function(site) { // error
          var pinObj = {};
          pinObj.latitude = site.Lat;
          pinObj.longitude = site.Long;
          pinObj.title = site.Name;
          pinObj.subtitle = site.Address;
          return pinObj;
        }) || undefined}
      />
      </View>
    );
  },

observe: function(props, state) {
    var siteQuery = (new Parse.Query('Site')).ascending('Name');
    return state.isLoading ? {sites: siteQuery} : null;
  },

});

产生错误：＆＃39; 无法读取属性＆＃39;网站＆＃39;未定义的＆＃39;。这显然是因为我在查询返回之前尝试迭代网站数据。如何修改我的语法来处理这个问题？在单独的函数中定义地图？

Answer 1

当然，渲染组件时数据可能尚不可用。

ParseReact mixin / observe的工作方式仅在解析查询返回后调用observe方法。所以方法的顺序是：

getInitialState()
componentDidMount()
... here parse's query starts I believe
render()
.... here some time passes
observe() // here the query returns the data
.... Parse's ParseReactMixin updates state via this.setState({data: returnedValue})
.... changed state triggers rerender
render()

Render被调用两次 - 一次在加载数据之前，第二次在之后。你应该做的是检查状态并显示一些加载状态（在我们的例子中，最有可能映射一些加载指示器。例如：

render(): function {
    if(this.state.isLoading) {
       return <View><Map ..... (no annotations) ></Map><ActivityIndicatorIOS/></View>
    } else {
       return <View><Map .... (with annotations)></Map></View>
    }
}

或者你可以定义一些＆＃34; getAnnotations（）＆＃34;如果真实注释不可用，则返回真实注释或虚拟（或空注释）的方法。然后，您可以将其用作

...
annotations={this.getAnnotations()}
...

并在ActivityIndicatorIOS上添加正确的参数组合（动画= {this.state.isLoading} hidesWhenStoped = true}

如何在React或React Native中重构Parse（或任何数据源）的响应？

1 个答案: