React/NextJS中如何通过Select-Option的OnChange正确传递键值对？

1. addRequestForm.js 正确写法 #

import { useDispatch, useSelector } from 'react-redux';
import { setContactName, setContactType } from '../features/requestSlice'; // 按实际slice路径调整

export default function AddRequestForm() {
  const dispatch = useDispatch();
  const { contact_name, contact_type } = useSelector(state => state.request);

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 提交到后端接口，确保携带所有字段
    await fetch('/api/add-request', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ contact_name, contact_type })
    });
    // 提交后的逻辑：如重置表单、提示成功等
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 正常工作的contact_name输入框 */}
      <input
        type="text"
        value={contact_name}
        onChange={(e) => dispatch(setContactName(e.target.value))}
        placeholder="Contact Name"
      />

      {/* 修复后的Select-Option组件 */}
      <select
        value={contact_type}
        onChange={(e) => dispatch(setContactType(e.target.value))}
      >
        <option value="">请选择类型</option>
        <option value="personal">个人</option>
        <option value="business">商务</option>
      </select>

      <button type="submit">提交</button>
    </form>
  );
}

2. reducer.js（Request Slice）正确写法 #

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  contact_name: '',
  contact_type: '' // 初始化对应字段，与Select的value类型匹配
};

const requestSlice = createSlice({
  name: 'request',
  initialState,
  reducers: {
    setContactName: (state, action) => {
      state.contact_name = action.payload;
    },
    setContactType: (state, action) => {
      state.contact_type = action.payload; // 正确接收并更新选中值
    }
  }
});

export const { setContactName, setContactType } = requestSlice.actions;
export default requestSlice.reducer;

关键检查项 #

• 确认Select组件的value与Redux state中的contact_type完全绑定，避免选中值与state不一致
• onChange事件必须正确传递e.target.value给Redux action，不要写错参数
• 后端Mongoose Schema中必须包含contact_type字段（类型建议设为String），否则数据无法存入
• 表单提交时务必将contact_type与contact_name一同传给后端，不要遗漏字段

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