我遵循this tutorial并尝试对其进行一些修改。
我有这个代码addRequestForm.js

import { BiPlus } from 'react-icons/bi'
import { useMutation, useQueryClient } from "react-query"
import { addRequest, getRequests } from "../../lib/helper"
import Bug from "./bugRequest"
import Success from "./successRequest"

export default function AddRequestForm({ formData, setFormData }) {

    const queryClient = useQueryClient()
    const addMutation = useMutation(addRequest, {
        onSuccess: () => {
            queryClient.prefetchQuery('requests', getRequests)
        }
    })

    const handleSubmit = (e) => {
        e.preventDefault();
        if (Object.keys(formData).length == 0) return console.log("Don't have Form Data");
        let { sector, contact_name } = formData;

        const model = {
            sector, contact_name
        }

        addMutation.mutate(model)
    }

    if (addMutation.isLoading) return <div>Loading!</div>
    if (addMutation.isError) return <Bug message={addMutation.error.message}></Bug>
    if (addMutation.isSuccess) return <Success message={"Added Successfully"}></Success>

    return (
        <form className="grid lg:grid-cols-2 w-4/6 gap-4 md:px-4 md:mx-auto" onSubmit={handleSubmit}>
            
            <div className="input-type">
                <label htmlFor="sector" className="block text-sm font-medium text-gray-700">
                    Sector
                </label>
                <select
                    id="sector"
                    name="sector"
                    autoComplete="sector-name"
                    className="border w-full px-5 py-3 focus:outline-none rounded-md"
                    
                    onChange={(e) => setFormData({ [e.target.name]: e.target.value })}
               
                >
                    <option value="North">North</option>
                    <option value="South">South</option>
                    <option value="West">West</option>
                    <option value="East">East</option>
                    {/*  */}
                </select>
            </div>

            <div className="form-control input-type">
                <label className="input-group">
                    <span>Contact Name</span>
                    <input type="text" onChange={setFormData} name="contact_name" placeholder="Contact Name Here..“ className="w-full input input-bordered" />
                </label>
            </div>


            <button type="submit" className="flex justify-center text-md w-2/6 bg-green-500 text-white px-4 py-2 border rounded-md hover:bg-gray-50 hover:border-green-500 hover:text-green-500">
                Add <span className="px-1"><BiPlus size={24}></BiPlus></span>
            </button>

        </form >
    )

}

对于name=“contact_name”已经成功插入数据库（mongodb + mongoose），但是，我还是不明白，如何对select-option做同样的操作？
已经尝试过这些：

onChange={(e) => setFormData({ e.target.name: e.target.value })}
onChange={(e) => setFormData({ sector.name: e.target.value })}
onChange={(e) => setFormData({ [e.target.name][0]: e.target.value })}

出现语法错误：意外的标记，应为“，"。虽然我认为这是正确的值，但我正在控制这些（结果：“扇区：我的名字”）。

onChange={(e) => setFormData({ sector: e.target.value })}
onChange={(e) => setFormData({ [e.target.name]: e.target.value })}

没有插入数据库。
如何正确地编写它？我使用的是nextjs（我认为reactjs也是一样的，对吗？）+ @reduxjs/toolkit 1.9.1.
如果需要，这里是reducer.js：

import UpdateRequestForm from "./updateRequestForm";
import AddRequestForm from "./addRequestForm";
import { useSelector } from "react-redux";
import { useReducer } from "react";

const formReducer = (state, event) => {
    return {
        ...state,
        [event.target?.name]: event.target?.value
    }
}

export default function FormRequest() {

    const [formData, setFormData] = useReducer(formReducer, {})
    const formId = useSelector((state) => state.app.client.formId)

    return (
        <div className="container mx-auto py-5">
            {formId ? UpdateRequestForm({ formId, formData, setFormData }) : AddRequestForm({ formData, setFormData })}
        </div>
    )
}