React-Bootstrap编辑表单：下拉框与数字输入框旧值无法正常显示的问题求助

看起来你碰到的问题核心在于非受控组件（defaultValue）和受控组件的差异，以及一些细节上的类型匹配、请求配置问题，咱们一步步拆解解决：

1. 为什么只有文本框看似正常？ #

defaultValue是给非受控组件使用的，它仅会在组件第一次挂载时赋值一次，后续状态更新不会同步到输入框。文本框看起来正常，只是巧合——初始状态serviceName为空，请求完成后状态更新，但此时defaultValue已经不会再响应状态变化了，本质上它并没有真正实现“回显更新后的值”。

正确的做法是把所有需要同步状态的输入框改成受控组件，用value绑定状态，这样状态更新时输入框会自动同步显示。

2. 下拉框（select）无法回显的修复 #

把defaultValue替换成value绑定serviceType状态，同时给默认提示选项加上空value，确保和初始状态的空字符串匹配：

<Form.Group className="mb-3" controlId="serviceType">
  <Form.Label>Service Type</Form.Label>
  <Form.Control as="select"
    onChange={(event) => {
      setServiceType(event.target.value);
    }}
    value={serviceType} {/* 替换defaultValue为value */}
  >
    <option value="">Select your service type here...</option>
    <option value="cleaning">Cleaning</option>
    <option value="gardening">Gardening</option>
    <option value="babysitting">Babysitting</option>
    <option value="tutoring">Tutoring</option>
  </Form.Control>
</Form.Group>

你已经确认后端返回的serviceType值正确，只要和选项的value完全匹配（大小写、拼写一致），替换后下拉框就能正确回显选中值。

3. 数字输入框显示0的问题 #

同样把defaultValue换成value，另外注意数字输入框的event.target.value是字符串类型，直接赋值会导致状态类型不匹配，需要在onChange中转成数字：

<Form.Group className="mb-3" controlId="servicePrice">
  <Form.Label>Service Price Per Hour</Form.Label>
  <Form.Control type="number" placeholder="Enter service price per hour"
    onChange={(event) => {
      setServicePrice(Number(event.target.value)); // 转换为数字类型
    }}
    value={servicePrice} {/* 替换defaultValue为value */}
  />
</Form.Group>

这样当useEffect把后端返回的数字赋值给servicePrice时，输入框就能正确显示旧值了。

4. 额外优化：修复无限请求问题 #

你的useEffect没有添加依赖数组，会导致组件每次渲染都发送Axios请求，不仅浪费资源还可能引发状态异常。加上[userId]作为依赖，只有当userId变化时才重新请求；同时注意Axios的get请求参数需要放在params字段中：

useEffect(()=>{
  Axios.get(`http://localhost:8800/${userId}/editthisservice`,{
    params: { id: userId } // 修正get请求参数的传递方式
  })
  .then((res) => {
    setServiceName(res.data.serviceName);
    setServicePrice(res.data.servicePrice);
    setServiceType(res.data.serviceType);
  })
}, [userId]); // 添加依赖数组

最终统一受控组件的核心代码 #

建议把文本框也改成value绑定，保持所有输入框都是受控组件，逻辑更统一：

<Form.Group className="mb-3" controlId="serviceName">
  <Form.Label>Service name</Form.Label>
  <Form.Control type="text" placeholder="Enter service name"
    onChange={(event) => {
      setServiceName(event.target.value);
    }}
    value={serviceName} {/* 统一改为受控组件 */}
  />
</Form.Group>

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