html - 带有 React 的 HTML 选择标记 - 从数据数组中创建渲染元素的选择列表，但不将第一个元素识别为值

Question

我创建了一个form，它有selecthtml 标签。

我users从我的 MongoDBarray中获取信息，然后使用获取的信息进行更新，然后将每个信息呈现user elements为select标签下拉菜单的选项。

问题是所有数据都呈现为选择标签元素，但如果我选择第一个选项，它不会更新值而是保持为空。

这就是我select的表单部分的样子：

<select ref={userInput}
  required
  className="form-control"
  value = {username}
  onChange={onChangeUsername}
>
  {userItem}
</select>

这是在事件onChangeUsername中触发的：onChange

const [ username, setUsername ] = useState('')
const onChangeUsername = (e) => setUsername(e.target.value)  

这就是我渲染的方式userItem：

const userItem = users.map(user => <UserOption key={user} user={user}/>)

这是UserOption组件：

import React from 'react'

export default function UserOption({user}) {
  return (
    <option
      key={user}
      value={user}
    >
      {user} 
    </option>
  ) 
}

它只是不识别菜单option element中的第一个。select我console.log的post请求，user价值是""如果我选择第一个选项。任何其他选项都会传递其价值。

想知道是什么原因？以及如何解决？

标签： htmlnode.jsreactjsexpressselect