如何在同一React Native组件中使用两个react-native-date-picker日期选择器

问题根因 #

两个react-native-date-picker属于同类型同级组件，你没有给它们设置唯一的key属性，React会默认复用同一个组件实例，导致内部状态互相绑定，修改一个就会同步影响另一个。

解决方案 #

按以下步骤修改即可：

• 给两个DatePicker分别添加唯一的key属性，明确区分为两个独立组件
• 可选优化：修改回调参数名避免和外层state变量重名，防止作用域混淆的潜在问题

修正后核心代码示例 #

import DatePicker from 'react-native-date-picker';

const [date, setDate] = useState(new Date());
const [dateForEndDate, setDateForEndDate] = useState(new Date());
const [open, setOpen] = useState(false);
const [openForEndDate, setOpenForEndDate] = useState(false);

// 开始日期选择器
<TouchableOpacity onPress={() => setOpen(true)}>
  <View
    style={{
      width: wp('75%'),
      flexDirection: 'row',
      backgroundColor: '#F2F3F5',
      borderRadius: 5,
      height: 40,
      marginTop: '5%',
    }}>
    <View
      style={{
        marginLeft: 15,
        justifyContent: 'center',
        height: 40,
      }}>
      <MaterialIcons name="date-range" size={23} color="#E73952" />
    </View>

    <DatePicker
      key="start-date-picker"
      modal
      mode="date"
      open={open}
      date={date}
      onConfirm={(selectedStartDate) => {
        setOpen(false);
        setDate(selectedStartDate);
      }}
      onCancel={() => {
        setOpen(false);
      }}
    />
    <View
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: '3%',
      }}>
      <Text>{date.toDateString()}</Text>
    </View>
  </View>
</TouchableOpacity>

// 结束日期选择器
<TouchableOpacity onPress={() => setOpenForEndDate(true)}>
  <View
    style={{
      width: wp('75%'),
      flexDirection: 'row',
      backgroundColor: '#F2F3F5',
      borderRadius: 5,
      height: 40,
      marginTop: '5%',
    }}>
    <View
      style={{
        marginLeft: 15,
        justifyContent: 'center',
        height: 40,
      }}>
      <MaterialIcons name="date-range" size={23} color="#E73952" />
    </View>

    <DatePicker
      key="end-date-picker"
      modal
      mode="date"
      open={openForEndDate}
      date={dateForEndDate}
      onConfirm={(selectedEndDate) => {
        setOpenForEndDate(false);
        setDateForEndDate(selectedEndDate);
      }}
      onCancel={() => {
        setOpenForEndDate(false);
      }}
    />
    <View
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: '3%',
      }}>
      <Text>{dateForEndDate.toDateString()}</Text>
    </View>
  </View>
</TouchableOpacity>

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