Question

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

编辑：我发现this source完全符合我的要求，但在尝试使用代码时，我在控制台中出现错误，说明＆＃34; e.map不是函数＆＃34;。我发布了我在下面尝试过的代码。

编辑2：为了不详细说明，我在最初安装组件时通过AJAX请求从我的SQL Server数据库中检索数据（组件在下面安装了函数）。我通过.Net / C＃做我的服务器端的东西，并通过xhttp.responseText和string.prototype.split将数据从客户端带回到一个数组中。为了更快地进行调试，我一直跳过ajax请求，每次都不依赖于数据库调用（因此检查404错误的原因），而是设置一个显式声明的数组命名＆＃39; N＆＃39;作为班级陈述。我的Dropdown组件（相关组件）有一个名为＆＃34; classes＆＃34;这与当前的类状态（如上所述设置）相关联，该代码也在下面发布。

类示例：

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

渲染方法：

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

使用setTimeout查看我的working example以模拟异步调用。

重要的变化是您需要从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标签中的值。完整代码如下所列。

使用Object.keys的渲染方法：

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>

    )

}

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

2 个答案: