将参数传递给另一个组件时出错

Question

这个问题真的让我很困惑，当连接打开并且我控制日志会话时它工作正常我得到了数据但是当我尝试将会话传递到调用函数之外并在组件渲染中控制 sessionVar 时我没有获取数据

import React, {Component} from 'react';
import autobahn from 'autobahn';

let sessionVar = undefined
class App extends Component {

    componentWillMount() {
       this.Call();
     }
    Call = () => {
      var connection = new autobahn.Connection({ url: 'ws://127.0.0.1:9000/', realm: 'realm1' });

      connection.onopen = function (session) {
        console.log(session, 'This show data when component mount')
        sessionVar = session
      };

    connection.open();
  }
  render() {
    console.log(sessionVar, 'Im getting undefined')
    return (
      <div>
        <Two session={sessionVar} />
      </div>
    )
  }
}

export default App;

Answer 1

改用state。参见 docs about React state

const Two = (props) => <h1>{props.session}</h1>

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sessionVar: undefined
    }
  }

  componentWillMount() {
    this.call()
  }
  
  call = () => {
    // Do you fetch session related stuff as normal
    let session = 'session fetched'
    // simulate a delay due to connection
    setTimeout(() => {
      this.setState({
        sessionVar: session
      }); // setState triggers rerendering
    }, 1000);
  }
  render() {
    return (
      <div>
        <Two session={this.state.sessionVar} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

将参数传递给另一个组件时出错

Error while passing argument to another component

javascript

reactjs

autobahn