Javascript 如何设置a<；的值；选择>；使用React而不使用onChange？

我得到了以下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>;

但这也不起作用。如果我的控制台日志

props.results[0].id

我得到了正确的id，但是如果我的控制台日志

barId

在此之后仍然是0。怎么会这样？是否触发了重新渲染器，并且select会立即将默认值0再次设置为状态

---

当使用useState pass默认值创建barId时，如何解决此问题，以使包装此选择的submit按钮将正确的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>;

const[barId，setband]=useState（props？.results[0]？.id±0）
const onBarChange=（e:React.ChangeEvent）=>{
setbrand（parseInt（即target.value））；
};
onBarChange（e）}>
{props.results.map（（条形图，y）=>(
{bar.name}位于{bar.city}
))}
;

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

<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>;

onBarChange（e）}>
选择栏
{props.results.map（（条形图，y）=>(
{bar.name}位于{bar.city}
))}
;

是异步的，因此调用后不能立即登录。但是当您调用它时，组件将重新渲染，然后它将具有正确的值。
<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>;