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

我正在尝试更新现有的React select（下拉列表），以包含当前服务器上的所有用户。我在服务器上有一个包含所有用户的数组，当这个数组出现时，我无法更新我的下拉列表

这是我的密码：

类用户列表扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
emit（'join'，{room:this.state.value}）；
this.setState（{value:event.target.value}）；
警报（“服务器上的人员：”+this.state.value）；
event.preventDefault（）；
}
handleSubmit（事件）{
//不是真的用这个
event.preventDefault（）；
}
render（）{
返回(
选择您最喜欢的La Croix风味：
{this.props.list.map（（name）=>{name}}
);
}
}
类登录扩展了React.Component{
render（）{
返回(
);
}
}

问题是，您不能只添加到普通变量，然后期望React to Magicly know重新呈现虚拟html，即

用户。推送（…）

是您想要的功能。调用此函数后，它将更新自身及其子组件的渲染方法

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

类用户列表扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
emit（'join'，{room:this.state.value}）；
this.setState（{value:event.target.value}）；
警报（“服务器上的人员：”+this.state.value）；
event.preventDefault（）；
}
handleSubmit（事件）{
//不是真的用这个
event.preventDefault（）；
}
render（）{
返回(
选择您最喜欢的La Croix风味：
{this.props.users.map（user=>{user.name}）}
);
}
}
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.getUsers=this.getUsers.bind（this）；
此.state={
用户：{}
}
}
componentDidMount（）{
这是getUsers（）；
}
getUsers（）{
socket.on（'update_list'，函数（msg）{
this.setState（{users:msg.data}）；
}.约束（这个）；
}
render（）{
返回(
);
}
}

问题是，您不能只添加到普通变量，然后期望React to Magicly know重新呈现虚拟html，即

用户。推送（…）

是您想要的功能。调用此函数后，它将更新自身及其子组件的渲染方法

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

类用户列表扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
emit（'join'，{room:this.state.value}）；
this.setState（{value:event.target.value}）；
警报（“服务器上的人员：”+this.state.value）；
event.preventDefault（）；
}
handleSubmit（事件）{
//不是真的用这个
event.preventDefault（）；
}
render（）{
返回(
选择您最喜欢的La Croix风味：
{this.props.users.map（user=>{user.name}）}
);
}
}
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.getUsers=this.getUsers.bind（this）；
此.state={
用户：{}
}
}
componentDidMount（）{
这是getUsers（）；
}
getUsers（）{
socket.on（'update_list'，函数（msg）{
this.setState（{users:msg.data}）；
}.约束（这个）；
}
render（）{
返回(
);
}
}

因此，将

users

数组传递到UserList中。您可以发布填充

用户

数组的代码吗？听起来你对它使用的

setState

不正确。我编辑了我的原始帖子，以显示填充

users

数组的一点点javascript。我遗漏了我声明的

users

，但是react元素和socket函数都可以全局访问它。您能否详细介绍一下如何使用

setState

。我不确定如何正确使用它。因此，您将

users

数组传递到UserList中。您可以发布填充

用户

数组的代码吗？听起来你对它使用的

setState

不正确。我编辑了我的原始帖子，以显示填充

users

数组的一点点javascript。我遗漏了我声明的

users

，但是react元素和socket函数都可以全局访问它。您能否详细介绍一下如何使用

setState

。我不知道如何正确使用它。