反應nonstateful組件是以某種方式通過狀態

不知何故，我無意中設置React中的「ownee」組件的狀態。我相信我只是傳遞道具，但是當我在React Dev Tools控制檯中查看組件時，我發現所有者的初始狀態正確地作爲道具傳入，但不知何故，當我在所有者，然後它被傳遞給ownee作爲狀態。反應nonstateful組件是以某種方式通過狀態

奇怪的是，之前我添加了「activePlayer」狀態/屬性，相同的代碼工作正常。如果它有什麼區別，「activePlayer」是對「players」數組中的一個玩家的對象引用。

這裏的主人的代碼全：

var App = React.createClass({ 
    getInitialState: function(){ 
    return{ 
     players: [], 
     neck: [], 
     activePlayer: null 
    } 
}, 

componentDidMount(){ 
    self = this; 

    socket.on("pass initial state", function(data){ 
     self.setState({players: data.players, 
        neck: data.neck, 
        activePlayer: data.activePlayer}) 
     }) 

    socket.on('new player added', function(data){ 
     self.setState({players: data.players}); 
     }) 

    socket.on('game started', function(data){ 
     self.setState({neck: data.neck, 
       activePlayer: data.activePlayer}) 
    }) 
    }, 

render: function() { 
    return (
     <div id='App'> 
     <OpponentsDIV players={this.state.players} activePlayer={this.state.activePlayer}/> 
    </div>)} 
    }); 

module.exports = App; 

ReactDOM.render(<App />, document.getElementById('main-container'));

而這裏的「ownee」（OpponentsDIV）

var OpponentsDIV = React.createClass({ 
    render: function() { 
    self = this; 

    var playerList = this.props.players.map(function(player){ 
     var key = "playerDIV"+ player.name; 
     var active = false; 
     if (self.props.activePlayer === player.name){ 
     active = true; 
     }; 
     return <PlayerDIV player={player} key={key} active={active}/> 
    }); 

    return (
     <div className="layoutDIV" id='OpponentsDIV'> 
     OpponentsDIV 
     {playerList} 
     <ChatDIV /> 
     </div> 
    ) 
    } 
}); 

module.exports = OpponentsDIV;

來源

2016-03-16 KSully2

當你在App中調用'setState'時，它強制調用'render（）'，結果'OpponentsDIV'也被重新渲染，但是新的'state'數據作爲道具。 – lux

爲了記錄，「ownee」和「owner」可能會更好地表示爲「孩子」和「父母」 – azium

@lux，這就是我認爲正在發生的事情。但爲什麼對手DIV有狀態呢？你可以在截圖中看到它的道具在初始渲染時正確傳入（它們與App上的GetInitialState相同）。但後來我設置了對手DIV的狀態而不是它的道具，現在它同時擁有STATE和PROPS，儘管它永遠不會有STATE。 – KSully2

我想通了：因爲我錯過了在語句中的「VAR」：

self = this;

內OpponentsDIV，我相信我的「自我」和/或「這個」變量的作用域是overla pping，導致React認爲「自我」是指對手DIV而不是App。

解決的辦法是簡單地將「var」放在OpponentsDIV的line3上的語句前面。我可以通過簡單地添加或刪除「var」來始終如一地重現修復和破壞代碼。啊，Javascript。

來源

2016-03-16 18:56:41 KSully2

你需要瞄準真正的舊瀏覽器嗎？你可以通過箭頭功能避免整個「自我」廢話。 – azium

反應nonstateful組件是以某種方式通過狀態

回答

相關問題