React中如何将Select组件的首个选项设为默认值

你之前的代码不生效，核心原因有两个：

• React的setState是异步操作，第一次调用setFormInput后，formInput并不会立刻更新，第二次调用时访问formInput.subscriberOptions还是初始的空数组，自然取不到value。
• 两次独立的setFormInput会被React合并，后一次的设置会覆盖前一次对subscriberOptions和subscriberOptionsIsLoading的修改。

方案一：一次性更新所有状态（推荐） #

先把API返回的数据处理成subscriberOptions数组，然后在同一个setFormInput调用里，直接用处理后的数组设置selectedSubscriber，不用依赖当前状态：

const defaultFormInput = {
  subscriberOptions: [],
  selectedSubscriber: "",
  subscriberOptionsIsLoading: true,
};

const [formInput, setFormInput] = useState(defaultFormInput);

useEffect(() => {
    async function loadSubscribers() {
      const response = await fetch("https://myapi/subscribers");
      const body = await response.json();
      // 先处理得到订阅者选项数组
      const subscriberOptions = body.map((x) => ({ value: x.id, name: x.name }));
      // 一次性更新所有状态，包括默认选中项
      setFormInput({
        ...formInput,
        subscriberOptions,
        subscriberOptionsIsLoading: false,
        // 用可选链避免数组为空时报错，空数组时设为空字符串
        selectedSubscriber: subscriberOptions[0]?.value || ""
      });
    }

    loadSubscribers();
}, []);

方案二：监听subscriberOptions变化设置默认值 #

如果需要在subscriberOptions更新后再设置选中项，可以用另一个useEffect监听subscriberOptions的变化：

const defaultFormInput = {
  subscriberOptions: [],
  selectedSubscriber: "",
  subscriberOptionsIsLoading: true,
};

const [formInput, setFormInput] = useState(defaultFormInput);

useEffect(() => {
    async function loadSubscribers() {
      const response = await fetch("https://myapi/subscribers");
      const body = await response.json();
      setFormInput({
        ...formInput,
        subscriberOptions: body.map((x) => ({ value: x.id, name: x.name })),
        subscriberOptionsIsLoading: false,
      });
    }

    loadSubscribers();
}, []);

// 监听subscriberOptions变化，设置默认选中项
useEffect(() => {
  if (formInput.subscriberOptions.length > 0) {
    setFormInput(prev => ({
      ...prev,
      selectedSubscriber: prev.subscriberOptions[0].value
    }));
  }
}, [formInput.subscriberOptions]);

额外注意：修复Select组件的value不匹配问题 #

你的JSX代码里，MenuItem的value设为了item.name，但Select绑定的value是formInput.selectedSubscriber（对应item.value也就是用户ID），这会导致选中状态不匹配。需要把MenuItem的value改成item.value：

<Select
  disabled={formInput.subscriberOptionsIsLoading}
  value={formInput.selectedSubscriber}
  name="selectedSubscriber"
  onChange={handleChange}
>
  {formInput.subscriberOptions.map((item) => (
    <MenuItem key={item.value} value={item.value}>
      {item.name}
    </MenuItem>
  ))}
</Select>

这样Select的value和MenuItem的value统一为用户ID，才能正确显示选中状态。

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