reactjs - 如何将更新的数据获取到 React 的构造函数中

Question

// parent class
export default class HomeScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      password: '',
      username:'',
      session: 'mani',
    };
  }

  authentication(){
    const self = this;
    axios.post('/api/users/login/', {
      password: this.state.password,
      username: this.state.username
    })
    .then(function (response) { 
      console.log(response);
      var sessionid=response.headers["set-cookie"][0].split('Secure,').pop().split(';').shift();
      self.setState({session: sessionid });
    })
    .catch(function (error) {
      console.log("Invalid username/password");
    });
  }

  render(){
    return(<Session sessid={this.state.session}/>);
  }
}

export default class Session extends Component {
  constructor(props){
    super(props);
    this.sessionVariable = this.props.sessid;
  }

  render(){    
    console.log(this.props.sessid);   // here i am getting updated value
    console.log("constructor "+this.sessionVariable);  // here i can't able to get updated value
    return (<View></View>);
  }
}

//child class 
import React, { Component } from 'react'
import { View, Text } from 'react-native'

export default class Session extends Component {
  constructor(props){
    super(props);
    this.state = {
        sessid: this.props.sessid
    }
  }

  componentWillReceiveProps(nextProps){
    const { sessid } = nextProps;

    if (sessid !== this.state.sessid) {
      this.setState({sessid});
    }
  }

  render(){
    console.log(this.props.sessid);     
    console.log("dummy"+this.state.sessid);

    return (<View></View>);
  }
}

如何在 React 中将更新的数据获取到构造函数中你能给我快速的解决方案吗我需要更新 constructor 中的数据。然后只有我能够在所有组件中调用全局变量

如何在 React 中将更新的数据获取到构造函数中你能给我快速的解决方案吗我需要更新 constructor 中的数据。然后只有我能够在所有组件中调用全局变量

Answer 1

在状态中添加您的 props 值，并使用 componentWillReceiveProps '生命周期更新它。

constructor(props) {
    super(props);
    this.state = {
      sessid: this.props.sessid;
    };
}

componentWillReceiveProps(nextProps){
    const { sessid } = nextProps;
    if(sessid !== this.state.sessid) {
        this.setState({sessid});
    }
}