javascript - 尝试使用 React 的 <select> 创建下拉选择菜单并将数组中的用户映射为选项

Question

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

在表单中，我收到两个错误，一个错误与结束标记(即 )有关，另一个错误与从数组映射用户列表有关。

下面是我的表单，位于 render() 方法之后。

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

第二个错误与 map 函数有关 (this.state.users.map((user) => {)

 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>
        )
    }

目前，用户数组是一个硬编码数组，因为我还没有添加到数据库:

    componentDidMount() {
        this.setState({ //set the state of the users array
            users: ['test user'], 
            username: 'test user'
        })
    }

这是浏览器中的错误:

  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}

Answer 1

您忘记用 > 关闭 select 开始标记:

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