Question

我一直得到undefined is not an object (evaluating this.props.socket.on)。我在我的index.ios.js文件中声明我的套接字，如下所示：

class Main extends Component {
   constructor(props) {
      super(props);

      this.state = {
        message: ''
      };
      this.socket = io('http://localhost:8000', {jsonp: false})
 }

然后，在我的renderScene(route, navigator)导航方法中，我有：

renderScene(route, navigator) {
   if (route.id == 'EnterName') {
     return <EnterName socket={this.socket} navigator={navigator} />
   }
}

render() {
  return (
    <Navigator
       initialRoute={{id: 'EnterName', index: 0}}
      renderScene={ this.renderScene } />
  );
}

但是这个套接字信息没有正确传递给EnterName。我尝试时收到上述错误：

this.props.socket.on('chat message', (msg) => {
   this.state.messages.push(msg);
   this.forceUpdate();
});`

你知道为什么套接字没有被正确初始化/传递吗？

Answer 1

我认为这是一个背景问题。您应该使用es6 fat arrow指定渲染方法：

renderScene = (route, navigator) => {
   if (route.id == 'EnterName') {
     return <EnterName socket={this.socket} navigator={navigator} />
   }
}

Answer 2

检查一下。

这是 gr3x btw。

如果您在 renderScene 的开头抛出调试器并检查此，您会看到您处于不同的范围， 导航器的范围，您无法访问主中存在的 this.socket ，因此您传递的是 undefined < / strong>以 EnterName 作为套接字道具以及从 EnterName

访问时收到这些错误的原因
相反，将 this.socket 添加到 initialRoute 对象，然后通过路径在 renderScene 中访问它像这样

renderScene(route, navigator) { if (route.id == 'EnterName') { return <EnterName socket={route.socket} navigator={navigator} /> } } render() { return ( <Navigator initialRoute={{id: 'EnterName', index: 0, socket: this.socket}} renderScene={ this.renderScene } /> ); }

这应该可以解决您的问题。如果我可以获得进一步帮助，请告诉我reddit！

在React Native中通过导航器传递套接字

2 个答案: