React Native中return语句内DateRangePicker选值后无法完成数组赋值的咨询

原代码报错的核心原因 #

你当前写的onChange属性值完全不符合React语法规范：

• 写法onChange={this.setDates,queryObj = {"fieldId":item.compareToFieldId,"value":startDate,"value1":"","queryOperator":item.operator}, queryArr.concat(queryObj)} 本质是JS逗号表达式，执行时会按顺序跑完所有语句，最终把最后一步的数组拼接结果（也就是queryArr.concat(queryObj)的返回值，是个数组）作为onChange的值传给DateRangePicker组件。
• 组件触发日期变更逻辑时，会尝试调用传入的onChange参数，拿到的是数组而非可执行函数，自然会直接抛出运行时错误。
• 之前尝试抽离独立文件、提前调用渲染函数方案失效，本质是没有打通「日期变更→本地状态更新→业务数组同步」的单向数据流，抽离组件时没有正确透传必要的渲染依赖和回调，导致DateRangePicker拿不到初始化所需的props，无法正常渲染。

可直接落地的实现步骤 #

1. 统一封装日期变更的处理逻辑 #

不要在JSX属性里杂糅赋值、数组拼接的逻辑，把所有状态更新、queryArr处理逻辑抽到组件的类方法中实现，避免JSX渲染过程中执行副作用：

// 类组件内部定义的统一日期变更处理方法
handleDateRangeChange = (dates, currentRenderItem) => {
  // 先更新DateRangePicker依赖的本地状态
  this.setState({
    startDate: dates.startDate,
    endDate: dates.endDate
  }, () => {
    // 状态更新完成后，执行queryArr的不可变更新
    const queryObj = {
      fieldId: currentRenderItem.compareToFieldId,
      value: dates.startDate,
      value1: dates.endDate,
      queryOperator: currentRenderItem.operator
    };
    // 过滤同字段的旧查询条件，避免数组重复插入相同fieldId的规则
    this.setState(prevState => {
      const filteredArr = prevState.queryArr.filter(item => item.fieldId !== queryObj.fieldId);
      return {
        queryArr: [...filteredArr, queryObj]
      }
    })
  })
}

2. 修正JSX分支的属性传值 #

替换掉之前错误的逗号表达式写法，把正确的回调方法绑定到DateRangePicker的onChange属性上，同时把当前分支匹配的item作为参数传入回调：

else if(item.type === 4) {
  console.log("QueryArr当前值", queryArr)
  return (
    <View style={styles.containerStyle}>
      <DateRangePicker
        onChange={(dates) => this.handleDateRangeChange(dates, item)}
        endDate={this.state.endDate}
        startDate={this.state.startDate}
        displayedDate={this.state.displayedDate}
        range
      />
    </View>
  )
}

3. 修正独立组件抽离的常见问题 #

如果需要把DateRangePicker相关的渲染逻辑抽成独立子组件，必须把所有必要的依赖通过props完整透传，不能在子组件内部硬编码获取父组件的状态值：

// 抽离的独立日期范围查询字段组件
const DateRangeQueryField = (props) => {
  const { item, startDate, endDate, displayedDate, onDateChange } = props
  return (
    <View style={styles.containerStyle}>
      <DateRangePicker
        onChange={onDateChange}
        endDate={endDate}
        startDate={startDate}
        displayedDate={displayedDate}
        range
      />
    </View>
  )
}

// 父组件渲染分支直接调用抽离后的组件
else if(item.type === 4) {
  return <DateRangeQueryField 
    item={item}
    startDate={this.state.startDate}
    endDate={this.state.endDate}
    displayedDate={this.state.displayedDate}
    onDateChange={(dates) => this.handleDateRangeChange(dates, item)}
  />
}

之前抽离后组件无法渲染的常见原因，是没有把startDate/endDate/displayedDate这些初始化必需的props传给DateRangePicker，组件因缺少必要的入参无法完成初始化渲染。

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