如何将组件中用户输入的Date传递至apiSlice？

核心思路 #

让getTodaysFixtures查询端点接收外部传入的日期参数，在组件中调用对应的Hook时，将用户选择的日期传递进去即可实现动态筛选。

步骤1：修改apiSlice，让查询接收参数 #

修改getTodaysFixtures的query函数，使其接受一个可选参数（默认值保留今日日期，保证原有逻辑不失效）：

var today = new Date();
var dateToday =
  today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: "xxx",
    prepareHeaders: (headers) => {
      headers.set("Xxxx", process.env.REACT_APP_RAPID_KEY);
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getNext50: builder.query({
      query: () => ({
        url: "/xxx",
        params: { next: "50" },
      }),
    }),
    getTodaysFixtures: builder.query({
      // 接收外部传入的日期，默认用今日日期
      query: (selectedDate = dateToday) => ({
        url: "/xxxx",
        params: { date: selectedDate },
      }),
    }),
  }),
});

// 导出自动生成的Hook
export const { useGetNext50Query, useGetTodaysFixturesQuery } = apiSlice;

步骤2：在组件中传递用户输入的日期 #

在包含日期选择器的组件中，维护选中日期的状态，将其传入useGetTodaysFixturesQuery Hook：

import { useState } from 'react';
import { useGetTodaysFixturesQuery } from './path/to/apiSlice';

function FixtureFilter() {
  // 初始化状态为今日日期，保证首次加载显示今日数据
  const [selectedDate, setSelectedDate] = useState(() => {
    const today = new Date();
    // 补零处理，确保格式为YYYY-MM-DD（和date input的返回格式一致）
    return `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
  });

  // 传入选中的日期到查询Hook
  const { data, error, isLoading } = useGetTodaysFixturesQuery(selectedDate);

  // 处理日期选择变化
  const handleDateChange = (e) => {
    setSelectedDate(e.target.value);
  };

  return (
    <div>
      <input type="date" value={selectedDate} onChange={handleDateChange} />
      {isLoading && <p>加载中...</p>}
      {error && <p>加载失败：{error.message}</p>}
      {data && (
        <ul>
          {data.map(fixture => (
            <li key={fixture.id}>{fixture.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default FixtureFilter;

额外注意事项 #

• 确保传递的日期格式和后端接口要求一致，上述示例中input type="date"返回的YYYY-MM-DD格式如果不符合接口要求，需要在传递前做格式转换。
• 如果需要在多个组件中共享选中的日期，可以将selectedDate存入Redux Store，组件从Store读取后再传递给查询Hook。

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