Reactjs react非状态组件以某种方式传递状态

不知何故，我无意中在React中设置了“ownee”组件的状态。我相信我只是在传递道具，但是当我在React-Dev工具控制台中查看组件时，我看到所有者的初始状态被正确地作为道具传递，但是不知何故，当我在所有者中调用“setState”时，它会作为状态传递给所有者

奇怪的是，在我添加“activePlayer”状态/道具之前，同样的代码工作得很好。如果有任何区别，“activePlayer”是对“玩家”数组中某个玩家的对象引用

以下是业主的完整代码：

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'));

var-App=React.createClass({
getInitialState:函数（）{
返回{
玩家：[]，
颈部：[]，
activePlayer:null
}
},
componentDidMount（）{
self=这个；
socket.on（“传递初始状态”，函数（数据）{
self.setState（{players:data.players，
颈部：data.neck，
activePlayer:data.activePlayer}）
}) 
socket.on（'newplayer added'，函数（数据）{
self.setState（{players:data.players}）；
})
socket.on（'game start'，函数（数据）{
self.setState（{neck:data.neck，
activePlayer:data.activePlayer}）
})
},
渲染：函数（）{
返回(
)}
});
module.exports=App；
render（，document.getElementById（'main-container'）；

这是“ownee”（反对意见）

var OpponentsDIV=React.createClass({
渲染：函数（）{
self=这个；
var playerList=this.props.players.map（函数（播放器）{
var key=“playerDIV”+player.name；
var-active=false；
if（self.props.activePlayer===player.name）{
主动=真；
};
返回
});
返回(
对手司
{playerList}
)
}
});
module.exports=OpponentsDIV；

我明白了：因为我遗漏了语句中的“var”：

self = this; 

在OpponentsDIV中，我认为我的“self”和/或“this”变量的范围重叠，导致React认为“self”指的是OpponentsDIV而不是App

---

解决方法是简单地将“var”放在OpponentsDIV第3行的语句前面。我可以通过简单地添加或删除“var”来重复修复和破坏代码。啊，Javascript。

我发现了：因为我错过了语句中的“var”：

self = this; 

在OpponentsDIV中，我认为我的“self”和/或“this”变量的范围重叠，导致React认为“self”指的是OpponentsDIV而不是App

---

解决方法是简单地将“var”放在OpponentsDIV第3行的语句前面。通过简单地添加或删除“var.”啊，Javascript，我可以始终如一地重现修复和破坏代码。

当你在应用程序中调用

setState

时，它会强制调用

render（）

，因此，

OpponentsDIV

也会被重新呈现，但会以新的

状态

数据作为道具。作为记录，“ownee”和“owner”，可以更好地表示为“child”和“parent”@lux，这就是我所认为的情况。但是，为什么反对者有国家呢？您可以在屏幕截图中看到，它的道具在初始渲染时被正确传递（它们与应用程序上的GetInitialState相同）。但是后来不知何故，我设置了OpponentsDIV的状态，而不是它的道具，现在它既有状态又有道具，尽管它不应该有状态。@azium React文档区分了所有者/所有者和父/子关系：我认为后者只用于DOM对象。这不正确吗？屏幕截图中的

状态

可能实际上来自

应用程序

？您将从屏幕上注意到，

neck

包含在该状态对象中，但是

neck

甚至没有作为道具传递给

OpponentsDIV

。很奇怪。另外，我刚刚在我自己的一个没有状态的组件上做了一个

console.log

，并且在我的输出中做了

state:null

。。如果您在Plunkr或Codepen中重复这个示例，我很乐意进一步查看。乍一看似乎很奇怪。当你在应用程序中调用

setState

时，它会强制调用

render（）

，结果，

OpponentsDIV

也会被重新渲染，但使用新的

状态

数据作为道具。对于记录，“ownee”和“owner”可能更好地表示为“child”和“parent”@lux，这就是我想发生的事情。但是，为什么反对者有国家呢？您可以在屏幕截图中看到，它的道具在初始渲染时被正确传递（它们与应用程序上的GetInitialState相同）。但是后来不知何故，我设置了OpponentsDIV的状态，而不是它的道具，现在它既有状态又有道具，尽管它不应该有状态。@azium React文档区分了所有者/所有者和父/子关系：我认为后者只用于DOM对象。这不正确吗？屏幕截图中的

状态

可能实际上来自

应用程序

？您将从屏幕上注意到，

neck

包含在该状态对象中，但是

neck

甚至没有作为道具传递给

OpponentsDIV

。很奇怪。另外，我刚刚在我自己的一个没有状态的组件上做了一个

console.log

，并且在我的输出中做了

state:null

。。如果您在Plunkr或Codepen中重复这个示例，我很乐意进一步查看。乍一看似乎很奇怪。你需要瞄准真正的老浏览器吗？你可以用箭头函数来避免整个

self

的废话。你需要瞄准真正的老浏览器吗？使用箭头函数可以避免整个

self

无意义。