如何为ReactJs下拉菜单动态创建选项？

Question

I'm trying to update an existing React select (dropdown) to contain all of the users currently on a server. I have an array of all of the users on the server, I just can't get my dropdown to update when the array does.

Here is my code:

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

I'm very new to React, and I don't understand how to get elements to update via external request (in this case a server). Right now, my javascript stores the list of people on the server in an array called 'users' that is updated by the server. I would like the dropdown to update whenever the array does.

EDIT:

Here is the code that populates the users array:

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

The users array is definitely updated after the server calls 'update_list'. I have printed the values in users after that is called, and when a new user logs on, users does update accordingly.

Answer 1

The problem is you can't just add to a normal variable and expect React to magically know to re-render the virtual html, ie users.push(...) .

setState is the function you want. It will update the render methods of itself and it's child components after you call this function.

Your api call needs to be in a component.

For example, whenever the users change now it will update the render method because we use setState and it will re-render the new users.

Select doesn't have a value attribute. You want this on the option and probably want users to be an object. I'v updated the code.

This is just an example.

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