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> 

    ) 

}