如何通过从Redux Store中提取值来启动“刷新”？

Question

我有一组数据可以从Saga API正确提取更新的值（在console.log（）中显示正确），但是在刷新页面时它不会更新UI中的值。

我尝试通过刷新手动重新分配新的更新的JSON以覆盖旧数据，但是它只是返回空值

   // Scroll View
    <ScrollView
      refreshControl={
        <RefreshControl
          tintColor={'#E4E4E4'}
          refreshing={this.state.refreshing}
          onRefresh={this._onRefresh}
        />
      }
    >
      {exchanges.exchanges.length > 0 &&
        exchanges.exchanges.map((exchange, index) => (
          this.renderExchange(exchange, index)
        ))}
    </ScrollView>




 // Render Exchange 
 renderExchange = (exchange, index) => {
 const { account, exchanges } = this.props
 const { balances, exchangeArray } = this.state
 const { selectedExchange } = exchanges
 const { status, symbolPriceTicker, dayChangeTicker } = 
 selectedExchange
//this.setState({ balances: exchange.balances })
//AlertIOS.alert('I got here')

if (balances.length > 0 && exchangeArray.length > 0) {
  for (let i = 0; i < exchangeArray.length; i++) {
    if (exchange === exchangeArray[i]) {
      for (let j = 0; j < balances.length; j++) {
        console.log('Updated Balances: ' + JSON.stringify(balances[j]))
        console.log('Exchange Balances: ' + JSON.stringify(exchange.balances))
        exchange.balances = balances[j]
        balances.pop()
      }
    }
  }
}

return (
  <View style={screenStyles.container}>
  <ExchangeBox
    balances={exchange.balances}
    displayName={exchange.label}
    symbolPriceTicker={symbolPriceTicker}
    exchangeIndex={index}
    onSend={this.onSend}
  />
  <View style={screenStyles.largerContainer}>
    {symbolPriceTicker && dayChangeTicker && exchange.balances && (
      <ScrollView
        style={screenStyles.walletContainer}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        decelerationRate={0}
        snapToInterval={100} //your element width
        snapToAlignment={'center'}
      >
        {Object.keys(exchange.balances).map(
          symbol =>
            COIN_INFO[symbol] &&
            symbolPriceTicker[`${symbol}USDT`] && (
              <CoinContainer
                key={symbol}
                symbol={symbol}
                available={exchange.balances[symbol].free}
                price={symbolPriceTicker[`${symbol}USDT`]}
                dayChange={dayChangeTicker[`${symbol}USDT`]}
              />
            ),
        )}
      </ScrollView>
    )}
  </View>
</View>
)
}




fetchData = () => {
  const { exchanges } = this.props
  const { balances, exchangeArray } = this.state
  // Needs to fetch information to refresh
  if (exchanges.exchanges.length > 0) {
    exchanges.exchanges.map((exchange) => (
      balances.push(this.props.getBalances(exchange.balances)),
      exchangeArray.push(exchange)
      //console.log(exchange.balances)
    ))
    this.setState({ refreshing: false })
  } else {
    this.setState({ refreshing: false })
  }
}




componentDidMount() {
  this.fetchData()
}




_onRefresh = () => {
  this.setState({ refreshing: true })
  this.fetchData()
}

有什么方法可以成功地重新分配这些值，还是有更好的方法进行刷新？

Answer 1

您的fetchData无法获取数据，我不理解此方法。

但是我看到您在不使用setState的情况下错误地更改了状态。

所以我只是想以最小的改动来解决它。

fetchData = () => {
  const { exchanges } = this.props
  // you need to make new arrays, thats why we are using slice.
  const balances = this.state.balances.slice(); 
  const exchangeArray = this.state.exchangeArray.slice();

  if (exchanges.exchanges.length > 0) {
    exchanges.exchanges.map((exchange) => (
      balances.push(this.props.getBalances(exchange.balances)),
      exchangeArray.push(exchange)
      //console.log(exchange.balances)
    ))
   // we need to update the state using, setState, and passing our 2 arrays.
    this.setState({ refreshing: false, exchangeArray, balances })
  } else {
    this.setState({ refreshing: false })
  }
}