Как обновить состояние из другого компонента?

Question

Я использую реагировать родной и реагировать навигации для маршрутизации.

Как обновить состояние с другого компонента / страницы?

HomeScreen

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 и настройки маршрутизации и бокового меню, как показано ниже:

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 выполняется, но не обновляет состояние.

Answer 1

Если вам нужно обновить с дочернего компонента

Вам нужно будет передать Handlers от компонента, который содержит состояние , чтобы обновить значения, дочерний компонент может использовать эти обработчики для обновления состояния

Если вам нужно обновить из другого места

Вам нужно будет сделать уровень повышения Штат и выполнить то же самое, что и выше.

LevelUpComponent

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

  updateState = (values)=>{
    this.setState(values);
  }

  render(){
    return <div>
     <HomeScreen></HomeScreen>
     <SideMenuScreen updateState={this.updateState}></SideMenuScreen>
     </div>
  }
 }

Answer 2

Поскольку у вас нет отношений между родителями и детьми между вашими компонентами ... это можно выполнить с помощью 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);

Answer 3

при переходе к следующему экрану передайте эту функцию в параметрах,

this.props.navigate("SideMenuScreen",{update:this.updateState});

И на экране бокового меню, вызовите его с помощью реквизита,

this.props.navigation.state.params.update();//you can pass params also if needed

Answer 4

Вы можете сделать это, используя ref.

HomeScreen 

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 = ()=>{
    this.homeScreen.updateState();
  }

render(){
return(
<HomeScreen ref={(ele) => this.homeScreen = ele}/>
);
}

}