React.JS - 未在动态呈现列表中显示的值

Question

我的previous question中的问题最近已解决，现在已创建一个新问题，其中我的数组中的值未显示在呈现的下拉列表中。使用我在上一个问题中给出的答案，用正确的键填充列表，但我对数组中的值感兴趣，而不是键值。我在下面列出了我的修改后的渲染方法，以及我的应用程序中另一个组件的类原型接收到的类数据类型的示例。

编辑： 我找到了this source这正是我想要做的事情，但是在尝试他们的代码时，我在控制台中得到一个错误，指出“e.map不是函数”。我发布了我在下面试过的代码。

编辑2：为了不进行太多的细节，我从组件的初始安装（组件安装功能如下）时通过AJAX请求从我的SQL Server数据库中检索数据。我通过.Net/C＃做我的服务器端的东西，并通过xhttp.responseText和string.prototype.split将数据返回到客户端。为了加快调试速度，我一直跳过ajax请求，不要每次都依赖数据库调用（因此为什么要检查404错误），而是将名为'n'的显式声明数组设置为类的状态。我的Dropdown组件（有问题的组件）有一个名为“classes”的属性，它与当前的类的状态（如上所述设置）相关，该代码也在下面发布。

类例如：

['justin','tom','bob'] 

Render方法：

render: function(){ 

    return(
     <div> 

     <select onChange = {this.change}> 
     { 
      Object.keys(this.props.classes).map((value, key) =>{ 

      return <option key = {key}>{value}</option> 
      } 
     )} 
      </select> 
     </div> 

    ) 

} 



}); 

新代码的尝试：

export default React.createClass({ 

    getInitialState: function(){ 
     return{classes: this.props.classes } 
    }, 

    render: function() { 
     var names = this.state.classes; 
     console.log(names); 
     return (
      <select> 
       {names.map(function(name, index){ 
        return <option key={ index }>{name}</option>; 
        })} 
      </select> 
     ) 
    } 
}); 

编辑2代码：

componentDidMount: function(){ 
     var xhttp; 
     var myStr; 
     var user = window.x; 
     console.log("the current user is "+ user); 
    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 || xhttp.status == 404) { 
    document.getElementById("test").innerHTML = xhttp.responseText; 
    myStr = xhttp.responseText; 
    //n = myStr.split("\n"); 
    n = ['justin', 'earl', 'samuels', 'tom']; 
    console.log(n); 
    this.setState({ classes: n }); 
    } 
    }.bind(this); 
    xhttp.open("GET", "/portals/0/js/hello.aspx?q="+user, true); 
    xhttp.send(); 
    }, 

下拉组件：

<Dropdown classes = {this.state.classes} /> 

Answer 1

见我working example与setTimeout的模拟异步调用。

重要的变化是，你需要从props而不是state得到名称：

render: function() { 
    var names = this.props.classes; 
    console.log(names); 
    return (
     <select> 
      {names.map(function(name, index){ 
       return <option key={ index }>{name}</option>; 
       })} 
     </select> 
    ) 
} 

下面的代码：

export default React.createClass({ 

    getInitialState: function(){ 
     return{classes: this.props.classes } 
    }, 

    render: function() { 
     var names = this.state.classes; 
     console.log(names); 
     return (
      <select> 
       {names.map(function(name, index){ 
        return <option key={ index }>{name}</option>; 
        })} 
      </select> 
     ) 
    } 
}); 

是一个anti-pattern。由于getInitialState仅在组件第一次创建时被调用（classes prop是一个空数组），所以在异步调用成功后，它接收到类prop（现在的数组来自服务器）时，组件的状态未更新。

Answer 2

我的朋友Chris给了我一个真正琐碎的答案。基本上，因为我使用的是Object.keys，所以我只获取了特定的键，而不是执行时的值。所以为了获得价值，我需要添加的是{this.props.classes[value]}，我期待在我的选项JSX标签中的值。完整代码如下。

使用对象的渲染方法。键：

render: function(){ 

    return(
     <div> 

     <select onChange = {this.change}> 
     { 
      Object.keys(this.props.classes).map((value, key) =>{ 

      return <option key = {key}>{this.props.classes[value]}</option> 
      } 
     )} 
      </select> 
     </div> 

    ) 

}