React中映射Select组件子传父后下拉框重置问题排查

核心问题 #

下拉框选择后重置的本质是父组件状态初始值与子组件默认选项的value不匹配，再加上JSX语法错误引发的渲染异常：

• 父组件input1初始值为""，但子组件默认选项的value是"Choose a Year"，两者不匹配导致React无法正确关联选中状态
• 父组件return的JSX没有根包裹元素，属于语法错误，会触发组件异常渲染

修复步骤 #

1. 修正父组件初始状态与JSX结构 #

将input1的初始值改为和默认选项一致的"Choose a Year"，同时给JSX添加根元素：

function MapComponent() {
  // 初始值改为与默认选项匹配的"Choose a Year"
  const [input1, setInput1] = useState("Choose a Year");

  const setVehicleInfoInput = (value) => {
    setInput1(value);
  };

  return (
    <div> {/* 添加根元素，修复JSX语法错误 */}
      {input1} {/* 显示选中的年份 */}
      <VehicleInput setVehicleInfoInput={setVehicleInfoInput} sendYear={input1} />
    </div>
  );
}

export default React.memo(MapComponent);

2. 优化子组件的变量声明与列表渲染 #

将vehicleYearsArray改为const声明避免重复创建，同时给列表渲染的option添加key属性符合React规范：

const VehicleInput = ({ setVehicleInfoInput, sendYear }) => {
  // 用const声明数组，提升渲染性能
  const vehicleYearsArray = ["2000", "2001", "2002", "2003"];

  const handleYearSelection = (e) => {
    setVehicleInfoInput(e.target.value);
  };

  return (
    <select value={sendYear} className='vehicleInput' onChange={handleYearSelection}>
      <option value="Choose a Year"> -- Choose a Year -- </option>
      {vehicleYearsArray.map((year) => (
        <option key={year} value={year}>{year}</option>
      ))}
    </select>
  );
};

export default VehicleInput;

额外优化建议 #

子组件也可以用React.memo包裹，减少不必要的重渲染：

export default React.memo(VehicleInput);

修改完成后，下拉框选中年份后会保持选中状态，父组件也能正确接收并显示选中值。

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