Javascript 如何在Reaction中设置缺省值， Select 下拉列表，动态追加剩余值

我正在开发一个Reaction应用程序，其中有一个带有 Select 下拉列表的表单.当用户点击"编辑"按钮时，我希望在 Select 下拉列表中将所选产品记录的"UOM"字段的值设置为默认值.此外，我希望动态地将‘UnitMasterData’数组中的剩余值追加到缺省值之后.目前，我的代码使用来自‘UnitMasterData’的所有值填充SELECT下拉列表，而不设置默认值.如何实现此功能？

我在下面附上我的代码-

import React, { useEffect, useState } from 'react';
import { useNavigate, generatePath, Link, BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
import DataTable from 'react-data-table-component';
import { useParams } from 'react-router';
import FormRange from 'react-bootstrap/esm/FormRange';

function App() {

  const MySwal = withReactContent(Swal)

  const [formData, setFormData] = useState({
    productid1: '',
    product_name1: '',
    product_category1: '',
    uom1: '',
    purchase_rate1: '',
    sales_rate1: '',
    mrp1: '',
    opqty1: '',
    clqty1: '',
    status1: '',
    product_id_hidden1: '',
    operationtype1: 'Add Product'
  });
  
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const [UnitMasterData, setUnitMasterData] = useState([]);
  //2) using axios
  useEffect(() => {
  // Fetch data from the specified URL
  axios.get('http://localhost/api_link/codeigniter_part/public/UnitMaster')

    .then((response) => {
        // Access the response data directly using response.data
        setUnitMasterData(response.data.UnitMasterData);
      })
      .catch((error) => console.error('Error fetching data:', error));
  }, []);


  function getdatabyrecordarray(record) {
    // console.log(record.customer_mp_id);
    setFormData({
      productid1: record.productid,
      product_name1: record.product_name,
      product_category1: record.product_category,
      uom1: record.uom,
      purchase_rate1: record.purchase_rate,
      sales_rate1: record.sales_rate,
      mrp1: record.mrp,
      opqty1: record.opqty,
      clqty1: record.clqty,
      status1: record.status,
      operationtype1: 'Edit Customer'
    });
  }

  return (

  <div className="container" style={{color: '#4229cb', fontWeight: '500' ,backgroundColor: 'rgb(255 255 255)'}} >
    <h1 style={{ color: 'white', backgroundColor: '#4229cb', padding: '5px' }} className="text-center"> Product Master</h1>
      <nav style={{ marginTop: -8 }} className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <a className="navbar-brand" href="#">Home</a>  
        </div>  
      </nav>

 <div className="col-md-4">
              <label htmlFor="id-uom" className="form-label">UOM</label>
              <select className="form-select" id="id-uom" name="uom" value = {formData.uom1} onChange = {handleInputChange} >
              {UnitMasterData.map((umd) => (
                <option
                  value={umd.unitname}
                >
                  {umd.unitname}
                </option>
              ))}
              </select>
            </div>
          </div>

    <div className="row mt-4">
      <div className="col-md-12 table-responsive-xl">
        <table className="table table-bordered">
          <thead>
            <tr>
              <th>Prod. Code</th>
              <th>Production Name</th>
              <th>Category</th>
              <th>UOM</th>
              <th>Op Qty</th>
              <th>Cl Qty</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
          {ProductMasterData.map((p) => (

          <tr>
            <td>{p.productid}</td>
            <td>{p.product_name}</td>
            <td>{p.product_category}</td>
            <td>{p.uom}</td>
            <td>{p.opqty}</td>
            <td>{p.clqty}</td>
            <td>
              <button onClick={() => getdatabyrecordarray(p)} className="btn btn-info btn-sm">Edit</button>
              {/* <Link to={generatePath(routes.customerDetails, { customerid1: c.customer_mp_id })}  className="btn btn-success btn-sm">edit</Link> */}

              &nbsp;<button onClick={(event) => confirmDelete(event, p.productid)} className="btn btn-danger btn-sm ml-1">
              Delete
              </button>

            </td>
          </tr>
          ))}
          </tbody>
        </table>
      </div>
    </div>


  </div>
  
  );
}

export default App;

在解决这个问题的同时，考虑到我有限的Reaction经验，我try 了通过‘UnitMasterData’数组进行映射，并使用map函数填充 Select 下拉列表.但是，我无法为所选产品记录的‘UOM’字段设置默认值.我预计SELECT下拉菜单会在顶部显示所选产品记录的‘UOM’值，而在其下方显示‘UnitMasterData’中的剩余值. 我还试图通过向 Select 框添加一个值属性来解决这个问题.虽然这会在顶部成功显示所选记录的UOM值，但它会阻止从下拉列表中 Select 任何其他选项.