如何设置一个值<select>在不使用 onChange 的情况下使用 React？

Question

我得到以下 HTML 选择元素

<select id="bars" onChange={(e) => onBarChange(e)}>
  {props.results.map((bar, y) => (
    <option value={bar.id} key={bar.id} data-key={bar.id}>
      {bar.name} in {bar.city}
    </option>
  ))}
</select>;

使用以下 onChange 方法作为回调：

const onBarChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
  setBarId(parseInt(e.target.value));
};

但是，只要props.results (props.results.length === 1) 中只有一个栏，那么onBarChange(e)将永远不会被调用，因此barId将始终保持为 0（我猜是默认选择值）。

我试图将该逻辑放入提交表单中，如下所示：

if(props.results.length === 1) {
  setBarId(props.results[0].id)
}

但这也不起作用。 如果我控制台 log props.results[0].id我得到正确的 id 但如果我控制台 log barId在这之后它仍然是 0。 怎么会这样？ 是否触发了重新渲染并且选择立即再次将默认值 0 设置为状态？

我该如何解决这个问题，以便包装此选择的提交按钮在props.results只有一个栏时将正确的 barId 发送到后端（当然也应该与多个栏一起使用..）？

Answer 1

当您使用 useState 传递默认值创建 barId 时。

const [barId, setBarId] = useState(props?.results[0]?.id ?? 0)


const onBarChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setBarId(parseInt(e.target.value));
};


<select id="bars" onChange={(e) => onBarChange(e)}>
    {props.results.map((bar, y) => (
        <option value={bar.id} key={bar.id} data-key={bar.id}>
            {bar.name} in {bar.city}
        </option>
    ))}
</select>;

您可以做的另一件事是先添加一个空值。

<select id="bars" onChange={(e) => onBarChange(e)}>
    <option>Select Bar</option>
    {props.results.map((bar, y) => (
        <option value={bar.id} key={bar.id} data-key={bar.id}>
            {bar.name} in {bar.city}
        </option>
    ))}
</select>;