这是旧的，但由于答案#1与受控Select有关，而问题似乎与不受控Select有关，我认为值得为未来的读者留下一些行：
问题是，对于uncontrolled组件，React需要在第一次渲染**之前知道options**是什么，因为从那一刻起，defaultValue将不会覆盖Select的当前值。这意味着如果你在options之前渲染Select，它将不知道该选择什么。
您可以在options可用之前避免render来解决这个问题：

const RenderConditionally = ({ options, selected }) => options.length > 0 ? (
  <select defaultValue={selected}>
   {options.map(item => (
     <option key={item.id} value={item.value}>{item.label}</option>
   ))}
  </select>
) : null;

字符串
或者如果你不想使用三进制：

const RenderConditionally = ({ options, selected }) => {
  if (options.length === 0) {
    return null;
  }

  return (
    <select defaultValue={selected}>
      {options.map(item => (
        <option key={item.id} value={item.value}>{item.label}</option>
      ))}
    </select>
  );
};

型

对于遇到此问题的用户，您可以通过使用value prop而不是defaultValue来获得所需的功能，例如：

<select value={selectedOptionId}>
  {option_id.map(id =>
    <option key={id} value={id}>{options[id].name}</option>
  )}
</select>

字符串

很可能你的option_id和options数组结构或selectedOptionId变量有问题。你构建选择组件的方式是可以的。
我做了一个fiddle，代码运行良好：

render: function() {
let option_id = [0, 1];
let options = [{name: 'a'}, {name: 'b'}];
let selectedOptionId = 1
return (
  <select defaultValue={selectedOptionId}>
    {option_id.map(id =>
    <option key={id} value={id}>{options[id].name}</option>
    )}
  </select>
)

字符串
}

我能找到的最好的解决方案是将key属性设置为与defaultValue相同，因此它将是一个不同的元素。
后果不是我研究的，但我相信应该没问题。

你可以这样做，React会抱怨，因为它使用value而不是selected来保持表单组件more information的一致性。

const {useState} = React;

const Example = ({title}) => {
    const [states, setStates] = useState({
      selected: "Florida",
      values: [{name: "Alabama", code: "AL"}, {name: "Hawai", code: "HW"},{name: "Florida", code: "FL"}]
     });
  
    return (
       <select
      className="w-full"
      onChange={(e: any) => {
        setStates({
          ...states,
          selected: e.target.value,
        });
      }}
    >
      {states.values.map((state) => (
        <option
          value={state.name}
          key={state.name}
          selected={state.name === states.selected}
        >
          {state.name}
        </option>
      ))}
    </select>
    );
};

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <Example title="Example using Hooks:" />
);

个字符