2016-03-08 205 views
0

當我點擊觸發subscribe()的按鈕時,我試圖將this.state.subscribe改爲與它相反的布爾值。我甚至沒有管理改變this.state.subscribe的值,點擊按鈕時顯示的文字更少。我試過replaceState並添加回調函數。不完全確定我應該把什麼放在回調函數中,但如果這是我做錯了。反應 - 狀態不更新

SingleSubRedditList = React.createClass({ 
    mixins: [ReactMeteorData], 

    getMeteorData: function(){ 
    Meteor.subscribe('posts'); 
    var handle = Meteor.subscribe('profiles'); 
    return { 
     loading: !handle.ready(), 
     posts: Posts.find().fetch(), 
     profiles: Profiles.find({}).fetch() 
    }; 
    }, 

    getInitialState: function(){ 
    var subscribed; 
    return { 
     subscribed: subscribed 
    }; 
    }, 

    populateButton: function(){ 
    //fetch is cumbersome, later try and do this another way to make it faster 
    var profile = Profiles.find({_id: Meteor.userId()}).fetch(); 
    if (profile.length > 0){ 
     this.state.subscribed =  profile[0].subreddits.includes(this.props.subreddit); 
    } 
    }, 

    subscribe: function(){ 
    this.setState({ 
     subscribed: ! this.state.subscribed 
    } 
    ); 
    }, 

    renderData: function(){ 
    return this.data.posts.map((post) => { 
     return <SinglePost title={post.title} content={post.content} key={post._id} id={post._id} /> 
    }); 
    }, 

    render: function(){ 
    this.populateButton() 
    return (
     <div> 
     <button onClick={this.subscribe}> 
      <p>{this.state.subscribed ? 'Subscribed' : 'Click To Subscribe'}</p> 
     </button> 
     <p></p> 
    <ul> 
     {this.renderData()} 
    </ul> 
    </div> 
); 

} });

回答

1

您不能使用this.state.subscribed = ...設置狀態,您目前在populateButton中正在執行此操作。試圖直接改變這種狀態會導致它的行爲異常。

您還在使用未定義的變量初始化subscribed。您應該給它初始狀態truefalse

+0

我認爲使用'='設置狀態是做什麼的。謝啦。只是最後一個問題。我試圖根據Profile集合中的內容填充按鈕HTML。但是我不能在getInitialState中做到這一點,因爲數據還沒有可用,所以我做了一個函數,我在填充按鈕HTML並且它一直在工作的render方法中調用。自從取出'='它告訴我在現有狀態轉換期間無法更新(例如'render'內)。如何在getInitialState或其他位置填充按鈕HTML? – ChrisWilson

+0

我對Meteor並不是很熟悉,但作爲一個普通的React設計模式,您應該將外部資源作爲Props傳遞給您的組件,而不是直接訪問它們。由於無論何時將新的道具傳遞給組件,react都會重新呈現,因此可以確保在數據可用時正確初始化狀態。 – gravityplanx