Javascript 尝试使用React的创建下拉选择菜单，并将数组中的用户映射为选项

我正在尝试创建一个简单的应用程序，将用户添加到数据库MongoDb，并在下拉菜单中显示用户列表

在这个表单中，我得到了两个错误，一个是关闭标签，即从数组映射用户列表

下面是我的表单，在render方法之后

我曾尝试将更改为，这消除了其中一个错误，但在阅读React文档后，我不明白为什么不应该工作

第二个错误是映射函数this.state.users.mapuser=>{

 render() { 
        return ( 
        <div>
            <h3>Create new exercise log</h3>
            <form onSubmit={this.onSubmit}> 
                <div className="form-group">
                    <label>Username: </label>
                    <select ref="userInput"
                        required
                        className="form-control"
                        value={this.state.username}
                        onChange={this.onChangeUsername}
                        {
                            this.state.users.map((user) => {
                                return <option
                                    key={user}
                                    value={user}>{user}
                                    </option>;
                            })
                        }
                    </select>
                </div>
            </form>
        </div>
        )
    }

这是浏览器中的错误：

  Line 75:  Parsing error: Unexpected token, expected "..."

  73 |                         onChange={this.onChangeUsername}
  74 |                         {
> 75 |                             this.state.users.map((user) => {
     |                             ^
  76 |                                 return <option
  77 |                                     key={user}
  78 |                                     value={user}>{user}

您忘记用>>关闭“选择开始”标记：

---

关闭标记在“``value={user}>{user}``中，它关闭选项，而不是选择，试试它。我刚刚添加了浏览器错误，它说它无法解析这个，但我不明白为什么。请尝试其他特定于React/JSX的编辑器/安装扩展，以更轻松地了解这些。

  Line 75:  Parsing error: Unexpected token, expected "..."

  73 |                         onChange={this.onChangeUsername}
  74 |                         {
> 75 |                             this.state.users.map((user) => {
     |                             ^
  76 |                                 return <option
  77 |                                     key={user}
  78 |                                     value={user}>{user}

<select ref="userInput"
  required
  className="form-control"
  value={this.state.username}
  onChange={this.onChangeUsername} > //<== Here
      {
          this.state.users.map((user) => {
              return <option
                  key={user}
                  value={user}>{user}
                  </option>;
          })
      }
</select>