Question

我的问题是，当渲染到达{this.displayUsage（）}时，在函数displayUsage（）中，函数使用前面的this.props.stoveUsage而不是我从函数getUsage（）获得的新函数。

目前的情况如下：

目前，viewType状态为＆＃39; day＆＃39;
我按段中的按钮，例如＆＃39; month＆＃39;
onPressSegment（）运行，然后是setState（viewType），组件重新渲染，由于状态更改使用旧的stoveUsage道具，displayUsage（）运行使用旧的prop，getUsage（）运行，prop更新

问题：我需要组件为displayUsage函数渲染和使用NEW prop，而不是OLD函数。

class Stats extends React.Component {
  state = {
    viewType: 'day',
    dt: moment(),
    device: {}
  }
  getUsage = () => {
    let dt = this.state.dt
    let vt = this.state.viewType
    let dev = this.state.device
    let date
    if (vt === 'day') {
      date = moment(dt).format('YYYY-MM-D')
    } else if (vt === 'week') {
      date = moment(dt).startOf('week').format('YYYY-MM-D')
    } else {
      date = moment(dt).format('YYYY-MM')
    }
    this.props.getStoveUsage(dev._id, vt, date)
  }    

  onPressSegment = (viewType) => {
    console.log('click on segment ', viewType)
    this.setState({ viewType }, () => {
      this.getUsage()
    })
  }
  displayUsage = () => {
    if (!this.props.fetching) {
      const total = this.props.stoveUsage.total
      const average = this.props.stoveUsage.average
      const usage = this.props.stoveUsage.usage
      if (this.state.viewType === 'day') {
        return <UsageDay totalUsage={total} average={average} usage={usage} date={this.state.dt} />
      } else if (this.state.viewType === 'week') {
        return <UsageWeek />
      } else {
        return <UsageMonth totalUsage={total} usage={usage} />
      }
    }
  }

render () {
   return (
        <Segment>
          <Button first active={this.state.viewType === 'day'} onPress={() => this.onPressSegment('day')}><Text>Daily</Text></Button>
          <Button active={this.state.viewType === 'week'} onPress={() => this.onPressSegment('week')}><Text>Weekly</Text></Button>
          <Button last active={this.state.viewType === 'month'} onPress={() => this.onPressSegment('month')}><Text>Monthy</Text></Button>
        </Segment>

        <Content contentContainerStyle={{ flex: 1 }}>
          {this.displayUsage()}
        </Content>
   }

const mapStateToProps = (state) => {
  return {
    fetching: state.smarturns.fetching,
    devices: state.smarturns.devices,
    selectedDeviceId: state.smarturns.selectedDeviceId,
    stoveUsage: state.smarturns.usage
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    selectDevice: (selectedDeviceId) => 
        dispatch(SmarturnsActions.deviceSelected(selectedDeviceId)),
    getStoveUsage: (deviceId, viewType, start) => 
        dispatch(SmarturnsActions.getUsage(deviceId, viewType, start))
  }
}

SmarturnsAction.getUsage代码：

export function* getUsage (api, action) {
  const { deviceId, viewType, start } = action
  console.log('Enter getUsage. action=', action)
  try {
    const response = yield call(api.getUsage, deviceId, viewType, start)
    if (response.ok) {
      console.log('Enter getUsage. data=' + response.data)
      yield put(SmarturnsActions.usageFetched(response.data))
    } else {
      yield put(SmarturnsActions.apiFailure(response, action))
    }
  } catch (err) {
    yield put(SmarturnsActions.apiFailure(err, action))
  }
}

SmarturnsActions.usageFetched code：

// received stove usage
export const usageFetched = (state, {usage}) => state.merge({fetching: 
false, usage})

React Native：渲染不渲染新道具

0 个答案: