Question

我正在尝试在调用JSON url之后更新DataSource但是ListView只是没有更新，事情是当应用程序第一次加载时，我看不到ListView中的数据，但是，当我'使用“热更新...”只需按下Ctrl + S在Visual Studio代码中，列表突然出现在ListView中..

可能是什么问题所以列表第一次没有加载？刚刚第二次？

constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([])
    };
  }


states = {
    index: 1,
    routes: [
      { key: '1', title: 'RECOMMANDED' },
      { key: '2', title: 'MY STATIONS' }
    ]
  };

  _handleChangeTab = (index) => {
    this.setState({ index });
  };

  _renderHeader = (props) => {
    return <TabBar {...props} />;
  };

  _renderScene = ({ route }) => {


    switch (route.key) {
    case '1':
      return <View style={[ styles.page, { backgroundColor: '#fff' } ]}><ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
          enableEmptySections={true}
        /></View>;
    case '2':
      return <View style={[ styles.page, { backgroundColor: '#fff' } ]}><Text>2</Text></View>;
    default:
      return null;
    }
  };

componentDidMount() {
    fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        var movies = responseJson.movies;
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseJson.movies)
        });
      }).done();
  }



renderRow(dataRow) {
    return(
    <TouchableHighlight>
        <View>
          <Text 
            style={{fontSize: 20, color: '#000000'}} 
            numberOfLines={1}>
            { dataRow.title } - { dataRow.releaseYear }
          </Text>
          <View style={{height: 1, backgroundColor: '#dddddd'}} />
        </View>
      </TouchableHighlight>);
    }

  render() {
    return (
        <View style={styles.container}>
        <TabViewAnimated
            style={styles.tabContainer}
            navigationState={this.states}
            renderScene={this._renderScene}
            renderHeader={this._renderHeader}
            onRequestChangeTab={this._handleChangeTab} />
      </View>
    );
  }

我正在使用react-native-tab-view模块。

谢谢

Answer 1

将renderRow道具更改为：

renderRow={this.renderRow.bind(this)}

您应该手动将其绑定到renderRow。使用ES6语法，您没有自动绑定，因此您需要自己完成。如果您不想手动处理此绑定，可以使用箭头语法。

renderRow(movie) {
}

不得不像我一样改变

renderRow = (movie) => {
}

然后，就像@John说你应该使用州。 this.state属性可以有许多状态。

React-Native，ListView + JSON获取数据源不更新

1 个答案: