如何正确向JavaScript函数传递多组键值对参数？日期范围选择器参数传递问题解析

当然可行！你目前的问题是参数传递方式不符合handleFilterChange的设计逻辑——这个函数原本是接收单个值和对应的键名，但你传了两个数组，导致它把数组当作键和值来处理，自然无法正确更新startDate和endDate这两个筛选项。

下面给你两种靠谱的解决思路，按需选择：

思路1：修改函数支持批量更新（推荐） #

直接升级handleFilterChange，让它既能处理单个键值对，也能接收一个对象来批量更新多个筛选项。这样日期范围的更新可以一步完成，更高效。

修改后的handleFilterChange： #

const handleFilterChange = (valueOrUpdates, title) => {
  clearPreviousResults();
  let newFilters;

  // 兼容原有单个键值对的调用方式
  if (title !== undefined) {
    newFilters = { ...filters, [title]: valueOrUpdates };
  } 
  // 处理批量更新的情况（比如日期范围）
  else {
    newFilters = { ...filters, ...valueOrUpdates };
  }

  saveFilterValue(newFilters, FILTERS_STORAGE_KEY);
  setFilters(newFilters);
};

对应的日期选择器回调： #

const handleDateRangeChange = dates => {
  if (!dates || dates.length <= 1) {
    return;
  }
  // 直接传递包含两个日期的对象
  handleFilterChange({
    startDate: dates[0],
    endDate: dates[1]
  });
};

思路2：不修改原有函数，用函数式更新修复两次调用的问题 #

如果你不想改动handleFilterChange的原有逻辑，可以利用React状态更新的函数式写法来解决两次调用覆盖的问题——之前你调用两次没效果，是因为两次更新都基于同一个旧的filters闭包值，第二次会覆盖第一次的修改。

修改后的handleFilterChange： #

const handleFilterChange = (value, title) => {
  clearPreviousResults();
  // 使用函数式更新，基于上一次的状态来计算新状态
  setFilters(prevFilters => {
    const newFilters = {
      ...prevFilters,
      [title]: value,
    };
    saveFilterValue(newFilters, FILTERS_STORAGE_KEY);
    return newFilters;
  });
};

对应的日期选择器回调： #

const handleDateRangeChange = dates => {
  if (!dates || dates.length <= 1) {
    return;
  }
  // 分两次调用，现在每次都会基于最新的状态更新
  handleFilterChange(dates[0], 'startDate');
  handleFilterChange(dates[1], 'endDate');
};

两种方案都能解决你的问题，第一种更适合长期维护，第二种适合快速兼容原有代码的场景。

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