如何动态创建ReactJS下拉菜单的选项

Question

我正在尝试更新现有的反应选择（下拉）以包含服务器上当前的所有用户。我有服务器上所有用户的数组，我只是无法在数组时获得下拉列表。

。

这是我的代码：

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    socket.emit('join', {room: this.state.value});
    this.setState({value: event.target.value});
    alert('People on server: ' + this.state.value);
    event.preventDefault();
  }
  handleSubmit(event) {
    //not really using this
    event.preventDefault();
  }
  
  render() {
    return (
      <form onChange={this.handleChange}>
        <label>
          Pick your favorite La Croix flavor:
          <select id="userlist" value={this.state.value} onChange={this.handleChange}>
            {this.props.list.map((name) => <option>{name}</option>)}
          </select>
        </label>
        
      </form>
    );
  }
}
class Login extends React.Component {
  render() {
    return (
      <div className="login">
          <NameForm />
          <UserList list={users} />
          <Chat />
          <ChatInput />
      </div>
    );
  }
}

我非常新手反应，我不明白如何通过外部请求（在这种情况下为服务器）获取元素来更新。现在，我的JavaScript将服务器上的人列表存储在服务器更新的名为"用户"的数组中。我希望下拉列表在数组时进行更新。

编辑：

这是填充用户数组的代码：

socket.on('update_list', function(msg) {
  users.push(msg.data);
});

服务器调用" update_list"之后，用户数组肯定会更新。此后，我已经打印了用户中的用户中的值，当新用户登录时，用户确实会相应更新。

Answer 1

问题是您不能仅仅添加到普通变量中，并期望反应能够神奇地知道重新渲染虚拟html，即 users.push(...)。

setState是您想要的功能。它将更新自身的渲染方法，并在调用此功能后是子组件。

您的API调用需要在组件中。

例如，每当用户现在更改时，它将更新渲染方法，因为我们使用setState，并且会重新渲染新用户。

选择没有值属性。您希望在选项上使用此功能，并且可能希望用户成为对象。我更新了代码。

这只是一个例子。

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    socket.emit('join', {room: this.state.value});
    this.setState({value: event.target.value});
    alert('People on server: ' + this.state.value);
    event.preventDefault();
  }
  handleSubmit(event) {
    //not really using this
    event.preventDefault();
  }

  render() {
    return (
      <form onChange={this.handleChange}>
        <label>
          Pick your favorite La Croix flavor:
          <select id="userlist" onChange={this.handleChange}>
            {this.props.users.map(user => <option value={user.value}>{user.name}</option>)}
          </select>
        </label>
      </form>
    );
  }
}
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.getUsers = this.getUsers.bind(this);
    this.state = {
        users: {}
    }
  }
  componentDidMount() {
    this.getUsers();
  }
    getUsers() {
        socket.on('update_list', function(msg) {
          this.setState({users: msg.data});
        }.bind(this));
    }
  render() {
    return (
        <UserList users={this.state.users}/>
    );
  }
}