反應：將數組對象存儲在狀態中並用鍵顯示

我正在學習反應，並且想知道將對象數組存儲在狀態中然後稍後訪問它們的正確方法，或者如果它是正確的並且我應該這樣做在所有。反應：將數組對象存儲在狀態中並用鍵顯示

在反應我執行和AJAX請求，我得到的對象列表。這些我想存儲在狀態，以便我可以將它推到另一個反應類作爲道具。我希望能夠訪問對象中的項目。

UPDATE - 固定和工作

var Providers = React.createClass({ 

    getInitialState: function() { 
     return {providers: []}; 
    }, 

    componentDidMount: function() { 
     var uri = this.props.source; 

     $.ajax({ 
      type: "GET", 
      dataType: 'json', 
      url: uri, 
      crossDomain: true, 
     }) 
     .done(function (data) { 
      var newProviders = [] 
      $.each(data, function (i, p) { 
       newProviders.push(data[i]); 
      }); 
      console.log(newProviders); 
      this.setState({ providers: newProviders }); 

     }.bind(this)) 
     .fail(function (xhr, textStatus, errorThrown) { 
      console.log(xhr.responseText); 
      console.log(textStatus); 
     }); 
    }, 

    render: function() { 
     return (
      <div> 
       <Provider providers={this.state.providers}></Provider> 
      </div> 
     ); 
    } 
}); 

var Provider = React.createClass({ 
    componentDidUpdate: function() { 
     console.log(this.props.providers[0]); 
    }, 

    render: function() { 
     return (
      <p></p> 
     ); 
    } 
});

來源

2015-11-08 Rockyy

您的代碼很可能工作，但我懷疑您對componentDidMount的理解不正確。在組件最初被渲染後，componentDidMount僅被調用一次。道具更新時不會調用它。您可能想要查看componentDidUpdate。

一般來說，我會避免使用自定義對象的狀態 - 尤其是共享可變對象 - 並使用普通對象。

來源

2015-11-09 14:30:08

是的，你對任何事情都完全正確 – Rockyy

我不會在陣列中的每個元素SETSTATE，因爲它會做一個可怕的事情 - 每次重新呈現組件。這將導致可怕的表現後來id它會成爲大的應用程序。

我會建議setState已經準備好的數據，所以它不會needresles重新[i]時代。因此，如果可以，請在Ajax請求中設置一次setState

來源

2015-11-08 15:19:35 Shiroo

我有更新我的文章 – Rockyy

反應：將數組對象存儲在狀態中並用鍵顯示

回答

相關問題