React+Redux联动select提交时date、hour传值为null问题排查

已完成三个select下拉组件的选项值填充，预期交互为：选中医生（medic）选择框的值后，日期（date）、时段（hour）选择框的选项根据数据库返回数据自动更新，当前联动功能运行正常。但触发dispatch提交数据时，medic字段可正常存入数据库，hour、date字段值始终为null。项目基于React与Redux实现。

业务逻辑代码 #

const specialty = useSelector((state) => state.specialty);
const { specialtyInfo} = specialty;
let doctorArray = [];
let hourArray = [];
let dateArray = []

specialtyInfo?.medicalspecialty.forEach(function (el) {
  doctorArray.push(el.last_name)
});

useEffect(() => {
  specialtyInfo?.medicalspecialty.forEach(function (el) {
      if(el.last_name == medic) {
          dispatch(getData(el.id))
      }
    });
}, [medic]);

const data = useSelector((state) => state.data);
const { dataInfo } = data;

dataInfo?.data.forEach(function (el) {
  hourArray.push(el.hour);
});

dataInfo?.data.forEach(function (el) {
  dateArray.push(el.date);
});

UI组件代码 #

<div>
  <CheckoutSteps step1 step2 step3 step4 />
  <form className="form" >
    <div>
        <label htmlFor="medic">Medic</label>
        <select name="medic" onChange={(e) => setMedic(e.target.value)}>
          {doctorArray.map((medic) => {
            return (
              <option value={medic} key={medic}>
                {medic}
              </option>
            );
          })}
        </select>
      </div>
      <div>
        <label htmlFor="date">Date</label>
        <select name="date" onChange={(e) => setDate(e.target.value)}>
          {dateArray.map((date) => {
            return (
              <option value={date} key={date}>
                {date}
              </option>
            );
          })}
        </select>
      </div>

      <div>
        <label htmlFor="hour">Hour</label>
        <select name="hour" onChange={(e) => setHour(e.target.value)}>
          {hourArray.map((date) => {
            return (
              <option value={date} key={date}>
                {date}
              </option>
            );
          })}
        </select>
      </div>
    </form>
    <div className="bookButton">
          <button className="buttonAccount " type="submit" onClick={(e)=>{submitHandler(e);}}>
                Confirm Booking
          </button>
    </div>
</div>

提交逻辑代码 #

const submitHandler = (e) => {
  e.preventDefault();
  dispatch(sendEmail(
      medic, 
      date, 
      hour, 
      userInfoInfo.userEmail,
      userInfoInfo.fullName,
      userInfoInfo.height,
      userInfoInfo.sex,
      userInfoInfo.weight,
      userInfoInfo.age,
      userInfoInfo.city,
      filtered_list[0].name,
      filtered_list[0].possibility))
};

• 表单控件为非受控模式：三个select标签均未绑定value属性关联对应状态，medic选项为页面初始加载时就存在的静态选项，选中值可以被正常捕获，但date、hour的选项是选中医生后异步从接口获取的，非受控模式下React无法正确同步异步渲染选项对应的选中值，导致状态更新失效。
• 状态声明缺失：代码中仅出现setMedic/setDate/setHour的调用，未看到对应useState的初始化声明，若date、hour状态未被正确注册，onChange触发的赋值无法被组件持久化，提交时读取到的始终是初始null值。
• 联动逻辑缺少状态重置：切换医生选项时，没有清空之前选中的date、hour值，旧值对应的选项在新的选项列表中不存在时，select的选中值会自动重置为空，但对应状态不会同步更新，提交时拿到的是过期的无效值。
• 表单结构不符合规范：提交按钮放在<form>标签外部，仅通过按钮onClick触发提交逻辑，会导致状态读取时机与表单原生行为不一致，容易拿到未更新的状态值。
• 存在冗余遍历与变量命名问题：两次遍历dataInfo.data分别生成日期和时段数组存在性能浪费，时段选择框map遍历的参数命名为date，提高了逻辑出错的概率。

1. 补全状态声明，在组件顶部引入useState并初始化三个选择框对应的状态

import { useState, useEffect, useMemo } from 'react';
// 组件内补全状态声明
const [medic, setMedic] = useState('');
const [date, setDate] = useState('');
const [hour, setHour] = useState('');

2. 将select改为受控组件，绑定value属性关联对应状态，修正时段选择框的遍历参数命名

{/* 医生选择框 */}
<select 
  name="medic" 
  value={medic}
  onChange={(e) => setMedic(e.target.value)}
>
  {doctorArray.map((medicItem) => (
    <option value={medicItem} key={medicItem}>
      {medicItem}
    </option>
  ))}
</select>

{/* 日期选择框 */}
<select 
  name="date" 
  value={date}
  onChange={(e) => {
    setDate(e.target.value);
    setHour(''); // 切换日期时重置已选时段，避免无效值
  }}
>
  {dateArray.map((dateItem) => (
    <option value={dateItem} key={dateItem}>
      {dateItem}
    </option>
  ))}
</select>

{/* 时段选择框 */}
<select 
  name="hour" 
  value={hour}
  onChange={(e) => setHour(e.target.value)}
>
  {hourArray.map((hourItem) => (
    <option value={hourItem} key={hourItem}>
      {hourItem}
    </option>
  ))}
</select>

3. 优化联动逻辑，切换医生时重置日期、时段状态，用useMemo缓存选项数组避免重复计算

// 优化选项数组生成逻辑，一次遍历完成数据提取，增加去重和空值处理
const hourArray = useMemo(() => {
  if (!dataInfo?.data) return [];
  return [...new Set(dataInfo.data.map(el => el.hour))];
}, [dataInfo]);

const dateArray = useMemo(() => {
  if (!dataInfo?.data) return [];
  return [...new Set(dataInfo.data.map(el => el.date))];
}, [dataInfo]);

// 优化联动useEffect，切换医生时重置已选的日期和时段
useEffect(() => {
  setDate('');
  setHour('');
  specialtyInfo?.medicalspecialty.forEach((el) => {
    if(el.last_name === medic) {
      dispatch(getData(el.id))
    }
  });
}, [medic, specialtyInfo, dispatch]);

4. 调整表单结构，将提交按钮移入form标签内部，用form的onSubmit事件绑定提交逻辑，移除按钮上多余的onClick绑定

<form className="form" onSubmit={submitHandler}>
  {/* 三个select的代码保持调整后的受控逻辑 */}
  <div className="bookButton">
    <button className="buttonAccount" type="submit">
      Confirm Booking
    </button>
  </div>
</form>

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