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

【问题标题】：React Native Listview data does not refresh when state changed状态更改时，React Native Listview 数据不刷新
【发布时间】：2018-01-04 20:21:45
【问题描述】：

我知道有 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>
    );
}

}

【问题讨论】：

包括一个示例 result 被传递到 ds.cloneWithRows(result)。您似乎希望在填充数据源时使用数组，但您传递的是原始 JSON。
这是result: pastebin.com/5FKgCTVV 的简化示例，这是fetch() 方法：return new Promise(function (resolve, reject) { fetch(url, { headers: { 'Cache-Control': 'no-cache, no-store' } }) .then((response) => resolve(response.json())) .catch((error) => { console.error(error); }); })

标签： android reactjs listview react-native mobile

【解决方案1】：

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

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],
                  ];

渲染（）{ 让数据 = 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>
);

}

【讨论】：