RNPickerSelect值变更时无需在onValueChange内调用函数自动触发fetch API

你可以通过类组件的componentDidUpdate生命周期钩子监听三个下拉选择器绑定的状态变化，自动触发接口请求，无需在每个onValueChange回调中手动调用接口，实现步骤如下：

步骤1：配置RNPickerSelect的onValueChange #

所有下拉选择器的onValueChange仅负责更新对应状态即可，不需要调用请求方法：

// 审批状态选择器示例
<RNPickerSelect
  value={this.state.selectedStatus}
  onValueChange={(val) => this.setState({ selectedStatus: val })}
  // 其他picker配置项
/>

// 年份选择器示例
<RNPickerSelect
  value={this.state.selectedYear}
  onValueChange={(val) => this.setState({ selectedYear: val })}
  // 其他picker配置项
/>

// 月份选择器示例
<RNPickerSelect
  value={this.state.selectedMonthIndex}
  onValueChange={(val) => this.setState({ selectedMonthIndex: val })}
  // 其他picker配置项
/>

步骤2：实现componentDidUpdate生命周期监听状态变化 #

在组件内添加componentDidUpdate方法，比对前后状态的变化，只要三个关联状态任意一个发生变更，就自动触发接口请求：

componentDidUpdate(prevProps, prevState) {
  // 比对三个核心参数的状态是否发生变化
  const statusChanged = prevState.selectedStatus !== this.state.selectedStatus;
  const yearChanged = prevState.selectedYear !== this.state.selectedYear;
  const monthChanged = prevState.selectedMonthIndex !== this.state.selectedMonthIndex;

  // 状态发生变化且月份索引有效时触发请求
  if (
    (statusChanged || yearChanged || monthChanged)
    && this.state.Month && this.state.Month[this.state.selectedMonthIndex]
  ) {
    // 清空原有数据
    this.setState({
      diesel_data: []
    })
    // 调用请求接口
    this.getDieselRequisitionList(
      this.state.selectedStatus,
      this.state.selectedYear,
      this.state.Month[this.state.selectedMonthIndex].id
    )
  }
}

注意事项 #

• 你原有页面聚焦触发请求的didFocus监听逻辑不需要修改，和上述实现互不冲突；如果需要统一逻辑，可以新增一个refreshFlag状态，在didFocus中更新该状态，同时将其加入componentDidUpdate的变更比对条件即可。
• 可以额外添加loading状态避免重复请求：请求发起前将loading设为true，请求完成后设为false，在componentDidUpdate的触发条件中增加!this.state.loading的判断即可。

内容的提问来源于stack exchange，提问作者Mahesh Amte