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中将更新的数据导入构造函数你能帮我快速解决吗？我需要在构造函数中更新数据。然后，只有我能够在所有组件中调用全局变量

Answer 1

在构造函数中定义一个状态：

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

现在，在render()：

中

console.log(props.sessid);
console.log("constructor "+ this.state.sessionVariable);

Answer 2

在州内添加道具值，并使用componentWillReceiveProps'生命周期更新它。

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

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

Answer 3

您可以使用状态来检查当前状况，让我用一个例子来解释它，

这是具有数据toggle

的初始状态的构造函数

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

更新现有状态，执行此操作

this.setState({ toggle: false });

确保您在箭头功能中使用上述代码，否则绑定.this

如果您想要下面的更多信息评论......

Answer 4

它没有显示更新值的唯一原因是因为构造函数只在组件的初始安装上被调用，因此无论基于props在构造函数中设置什么类变量，它都不会成为如果道具改变则更新。

第二：设置一个可直接从props派生的状态或类变量是一种反模式，你应该直接在渲染中使用道具

export default class Session extends Component {

     render(){
            console.log(this.props.sessid);  


        return (
           <View>

         </View>
        )
     }
}

如果你想更新基于的类变量，你可以使用componentWillReceiveProps函数，如

componentWillReceiveProps(nextProps) {
   if(nextProps.sessid !== this.props.sessid) {
      this.sessionVariable = nextProps.sessid;
      this.forceUpdate(); // called to cause a re-render
   }
}

或

export default class Session extends Component {

     constructor(props) {
        super(props);
        this.state = {
          sessionVariable: props.sessid
        }
     }
     componentWillReceiveProps(nextProps) {
       if(nextProps.sessid !== this.props.sessid) {
          this.setState({ sessionVariable: nextProps.sessid});
       }
     } 
     render(){
        console.log(this.state.sessionVariable);  
        return (
           <View>

         </View>
        )
     }
}

Answer 5

只有在装入之前，才会调用React组件的构造函数。如果在构造函数中定义了一些变量，它将存储其值而不是引用，并且不会再次重新渲染。

要更改构造函数中定义的任何值，需要在react（ComponentWillReceiveProps）的更新阶段更改它，然后调用

this.forceUpdate（）; //渲染组件

例如

componentWillReceiveProps(nextProps) {
   if(this.props.sessid !== nextProps.sessid) {
      this.sessionVariable= nextProps.sessid;
      this.forceUpdate();
   }
}

或者你可以在渲染功能中直接使用道具。

如何在React中将更新的数据导入构造函数

5 个答案: