Question

我有一个指向该州数据源的清单。当我选择一个下拉值时，它将更改全局redux存储。我正在侦听此组件中的所有全局存储更改，并且当下拉值更改时，它应该获取新数据并更新列表。

但是，当我选择一个新的下拉值时，它会触发一个新请求，并返回正确的数据，但是此更新后的数据不会反映在列表中。仅使用上一个请求而不是当前请求进行更新。好像列表没有在最新数据到达时重新呈现。

export class Home extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        data: [],
        refreshing: false,
        numberOfCoins: props.numberOfCoins,
        currencyType: props.currencyType
    };

    this._renderRow = this._renderRow.bind(this);
    this._getCoinData = this._getCoinData.bind(this);
    this._onRefresh = this._onRefresh.bind(this);
}

componentDidMount() {
    this._getCoinData();

    getStore().subscribe(() => {
        console.log('!!! trigger state refresh')
        this._onRefresh();
    });
}

async _getCoinData() {
    console.log('!! _getCoinData')
    const result = await getCryptocurrencyData();
    const adaptedResult = adaptCoinData(result);
    console.log('!! adaptedResult', adaptedResult[0].price)

    this.setState({
        data: adaptedResult,
        refreshing: false
    });

    console.log('!! refresh', this.state.refreshing)

}

_renderRow(data) {
    console.log('!! _renderRow', this.state.data[0].price)

    return (
        <CoinCell
            name={data.item.name}
            price={data.item.price}
            percentChange={data.item.percentageChange}
            symbol={data.item.symbol}>
        </CoinCell>)
}

_renderHeader() {
    return (
        <Header
            refresh={this._onRefresh}/>
    )
}

async _onRefresh() {
    this.setState({refreshing: true});
    console.log('!! refresh', this.state.refreshing)
    await this._getCoinData();
}

_renderSeparator() {
    return (
        <View
            style={{
                height: 1,
                width: "100%",
                backgroundColor: "#CED0CE",
            }}
        />
    );
};

render() {
    return (
            <FlatList
                data={this.state.data}
                extraData={this.state.data}
                onRefresh={this._onRefresh}
                refreshing={this.state.refreshing}
                renderItem={this._renderRow}
                ListHeaderComponent={this._renderHeader()}
                ItemSeparatorComponent={this._renderSeparator}
                keyExtractor={item => item.name}
            />
    );
}

}

再次设置数据段adaptedResult

[ { name: 'Bitcoin',
    symbol: 'BTC',
    timePeriod: 2457981859.410431,
    percentageChange: 1.72,
    price: 4816.6364323507 },
  { name: 'Ethereum',
    symbol: 'ETH',
    timePeriod: 1008374905.5177627,
    percentageChange: 3.2,
    price: 341.3106575964 },
  { name: 'XRP'

平板列表直到第二次刷新后才更新

0 个答案: