React 本机列表视图数据在状态更改时不会刷新

Question

我知道有 1000 个类似的问题，但即使尝试不同的示例，我也无法让它工作，提前道歉。

当我拉取以刷新数据时，将发送请求并收到新的响应(根据我的日志进行验证(。 但是，此数据不会反映在列表本身中。 我知道列表视图足够聪明，可以在数据源发生变化时刷新数据，但这里似乎没有发生。

constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
    this.state = {
        dataSource: dataSource.cloneWithRows([]),
        refreshing: false
    };
    this._renderRow = this._renderRow.bind(this);
    this._getCoinData = this._getCoinData.bind(this);
}
componentWillMount() {
    this._getCoinData();
}
_getCoinData() {
    return new Promise((resolve) => {
        getCryptocurrencyData()
            .then(function (result) {
                const ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
                this.setState({
                    dataSource: ds.cloneWithRows(result),
                    jsonData: result
                });
                resolve();
            }.bind(this))
    });
}

_renderRow(data) {
    return (
        <CoinCell
            coinName={data.name}
            coinPrice={data.price_gbp}
            coinPercentageChange={data.percent_change_24h}>
        </CoinCell>)
}
_renderHeader() {
    return (
        <Header />
    )
}
_onRefresh() {
    this.setState({refreshing: true});
    this._getCoinData()
        .then(() => {
            this.setState({refreshing: false});
        });
}

render() {
    return (
        <View>
            <ListView
                enableEmptySections
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refreshing}
                        onRefresh={this._onRefresh.bind(this)}
                    />
                }
                ref={'resultListView'}
                dataSource={this.state.dataSource}
                renderRow={this._renderRow}
                renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>}
                renderHeader={() => this._renderHeader()}
            />
        </View>
    );
}

}

Answer 1

使用的自定义ScroolView是重新呈现列表数据ti视图的最佳解决方案。

dataSource = [ ['SectionAScene',strings.SectionA,false],
                  ['SectionBScene',strings.SectionB,false],
                  // ['SectionC1Scene',strings.SectionC1,false],
                  ['SectionD1Scene',strings.SectionD1,false],
                  // ['SectionEScene',strings.SectionE,false],
                  ['SectionFScene',strings.SectionF,false],
                  // ['SectionGScene',strings.SectionG,false],
                  ['SectionH1Scene',strings.SectionH,false],
                  ['SectionIScene',strings.SectionI,false],
                  ['SectionJScene',strings.SectionJ,false],
                  ['SectionKScene',strings.SectionK,false],
                  ['SectionLScene',strings.SectionL,false],
                  ['SectionMScene',strings.SectionM,false],
                  ['SectionNScene',strings.SectionN,false],
                  ['SectionOScene',strings.SectionO,false],
                  ['SectionPScene',strings.SectionP,false],
                  ['SectionQScene',strings.SectionQ,false],
                  ['SectionQ1Scene',strings.SectionQ1,false],
                  ['SectionRScene',strings.SectionR,false],
                  ['SectionSScene',strings.SectionS,false],
                  ];

渲染(( { let data = this.state.dataSource; 返回 (

{data != [] ?
     {this._renderHeader()}
              <ScrollView>
                 { data.map( (item,index) =>
                     <TouchableNativeFeedback onPress={this._onPressButton.bind(this,item)}>
                        <View style={item[2]? styles.itemSelected : styles.item}>
                          <Text>{item[1]}</Text>
                        <View style={{flex:1}} />
                        <Icon name={item[2]?"check":"chevron-right"} size={16} color="#444"/>
                        </View>
                      </TouchableNativeFeedback>
                     )}
                     </ScrollView>
                    :<View />}
    </View>
);

}