时间戳

首页 > 解决方案 > 直接分配给 `this.state` 或在 Dashboard 组件中定义具有所需状态的 `state = {};` 类属性

react-native - 直接分配给 `this.state` 或在 Dashboard 组件中定义具有所需状态的 `state = {};` 类属性

问题描述

我将字符串值从一个组件类传递到另一个组件类并尝试更新另一个类中的状态

class Dashboard extends Component {

 constructor(props) {
  super(props);
  this.state = {
    systemDetailsData: null,
   }
 }
   CalledFromHeader = (systemDetailsData11) => {
     this.setState({ systemDetailsData:systemDetailsData11 })
   }
 }



  class Header extends Component {

    constructor(props) {
    super(props);
    Dashboard_Obj = new Dashboard();
     }

    OnPress = () => {
    Dashboard_Obj.CalledFromHeader("system data");
    }
   }

我收到此错误 ---> 警告：无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。相反，在仪表板组件中直接分配this.state或定义state = {};具有所需状态的类属性。

我想使用上面的代码更新仪表板类中的状态，谁能帮我实现这一点？

标签： react-nativestate

解决方案

在 render 方法中调用Header组件Dashboard并将函数作为 prop 传递给Header组件。

class Dashboard extends Component {

   constructor(props) {
    super(props);
    this.state = {
      systemDetailsData: null,
     }
   }
   CalledFromHeader = (systemDetailsData11) => {
     this.setState({ systemDetailsData:systemDetailsData11 })
   }
   
   redner(){
    return <Header changeState={this.CalledFromheader} />
   }
}



  class Header extends Component {
    constructor(props) {
      super(props);
    }
    
    render(){
      return(
        // something view onPress handler
        <Button onPress={()=>{
          this.props.CalledFromHeader('Some parameters')
        }} />
      )
    }
 }

推荐阅读