状态更改时，React Native Listview数据不会刷新

Question

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

当我拉动刷新数据时，会发送请求并收到新响应（根据我的日志验证）。但是，此数据不会反映在列表本身中。我理解listview非常聪明，可以在数据源发生变化时刷新数据，但这似乎不会发生。

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

您可以尝试执行以下模式：

{
   this.state.dataSource && 
   <ListView ... />
}

此模式将触发表达式的计算（因为和运算符的操作数都必须为true）

Answer 2

使用自定义ScrollView是重新渲染列表数据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],
                  ];

render（）{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>
);

}