如何从其他组件更新状态? [英] How to update state from other component?

问题描述

我正在使用 react native 和 react 导航进行路由.

I am using react native and react navigation for routing.

如何从另一个组件/页面更新状态?

How to update state from another component/page?

主屏幕

export class HomeScreen extends Component {
  constructor(){
    this.state = {
      test: ''
    }
  }

  updateState = ()=>{
    this.setState({test:'new value'});
  }

 }



SideMenuScreen
import { HomeScreen } from "./home"; 

export class SideMenuScreen extends Component {

  updateHomeState = ()=>{
    let oHome = new HomeScreen(); 
    oHome.updateState();
  }

}

我的 App.js 以及路由和侧边菜单配置如下:

My App.js and routing and sidemenu config as below :

import { createAppContainer, createDrawerNavigator } from "react-navigation";
import { SideMenuScreen } from "./screens/Sidemenu";
import { HomeScreen } from "./screens/Home";

export default class App extends Component {
  render() {
    return(
      <AppContainer></AppContainer>
    );
  }
}

const AppNavigator = createDrawerNavigator(
  {Home: HomeScreen, 
    other: otherpage},
  {
    contentComponent: SideMenuScreen
  }
);

const AppContainer = createAppContainer(AppNavigator);

updateState 正在执行但不更新状态.

updateState executing but not updating state.

推荐答案

由于您的组件之间没有父子关系……这可以通过 Redux Action 来完成>

Since you're not haveing Parent-Child relationship between your components ... thi s could be accomplished through Redux Action

HomeScreen;

export class HomeScreen extends Component {
  constructor() {
    this.state = {
      test: ""
    };
  }

  componentWillReceiveProps(nextProps) {
    const { test: nextTest } = nextProps;
    const { test } = this.props;

    if (nextTest !== test) {
        this.setState({ test: nextTest });
    }
  }

}

const mapStateToProps = ({ yourReducerName: test }) => ({ test });
export connect(mapStateToProps)(HomeScreen);

import { HomeScreen } from "./home";
import { connect } from "tls";

class SideMenuScreen extends Component {
  updateHomeState = () => {
    const { updateHomeStateAction } = this.props;

    updateHomeStateAction({ test: 'New Value' });
  };
}

export default connect(null, { updateHomeStateAction })(SideMenuScreen);

这篇关于如何从其他组件更新状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！