React Hooks中点击筛选按钮后如何重置日期选择器与输入框？

我瞅了下你的代码，有几个小细节出错导致点击Filter后没法清空输入，咱们一步步来修正：

1. 拼写错误 + 初始state设置问题 #

首先你定义的初始值变量拼写错了（intaialValue少了个i，应该是initialValue），而且date的state没设置初始值，得和你的初始值保持一致：

const initialValue = { date: null, time: null }; // 修正拼写
const Bookings = () => {
  const [date, setDate] = useState(initialValue.date); // 给date设置初始null
  const [time, setTime] = useState([]); // 保持你原来的初始空数组
  // ... 其他state定义，比如setBookings对应的bookings state
}

2. 请求后错误覆盖筛选state的问题 #

在getBookingsDateAndTime里，你请求完接口后写了setDate(response)和setTime(response)，这会把你的筛选日期/时间直接改成接口响应对象，完全没必要，还会搞乱state，得删掉这两行，只保留设置预订数据的setBookings(response.data.data.bookings)。

3. 正确重置筛选条件 #

最后重置的时候，要分别给date和time设置初始值，而不是用setDate(initialValue)（因为date是单独的state，不是对象）：

const getBookingsDateAndTime = async () => {
  // 先保存当前筛选值，避免重置后请求用错数据
  const selectedDate = date;
  const selectedTime = time;

  try {
    const formattedDate = moment(new Date(selectedDate)).format('YYYY-MM-DD');
    const response = await Axios.get(`http://localhost:4000/bookings/date/${formattedDate}/${selectedTime}`);
    console.log(response.data);
    setBookings(response.data.data.bookings);
    // 这里才是正确的重置操作
    setDate(initialValue.date);
    setTime([]); // 对应你的初始空数组
  } catch (error) {
    // 加个错误处理，避免请求失败后没法继续操作
    console.error('获取预订信息失败:', error);
  }
}

修正后的完整代码片段 #

const initialValue = { date: null, time: null }; // 修正拼写
const Bookings = () => {
  const [date, setDate] = useState(initialValue.date);
  const [time, setTime] = useState([]);
  const [bookings, setBookings] = useState([]); // 假设你定义了这个state

  const getBookingsDateAndTime = async () => {
    // 可以加个简单校验，避免空请求
    if (!date || time.length === 0) {
      alert('请选择日期和时间');
      return;
    }

    try {
      const formattedDate = moment(new Date(date)).format('YYYY-MM-DD');
      const response = await Axios.get(`http://localhost:4000/bookings/date/${formattedDate}/${time}`);
      console.log(response.data);
      setBookings(response.data.data.bookings);
      // 重置筛选条件
      setDate(initialValue.date);
      setTime([]);
    } catch (error) {
      console.error('筛选预订信息出错:', error);
    }
  }

  return (
    // ... 你的其他JSX内容
    <button type="button" className="btn btn-primary btn-sm" onClick={getBookingsDateAndTime}>Filter</button>
  );
}

这样修改后，点击Filter按钮完成筛选请求后，date和time就会被重置为初始值，日期选择器和输入框也就清空啦。

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