如何从其他组件更新状态？答案

【问题标题】：How to update state from other component?如何从其他组件更新状态？
【发布时间】：2019-08-29 12:54:15
【问题描述】：

我正在使用 react native 和 react navigation 进行路由。

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

主屏幕

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 和路由和 sidemenu 配置如下：

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 正在执行但不更新状态。

【问题讨论】：

你会在 HomeScreen 中渲染 SideMenuScreen 吗？
内容组件中没有侧边菜单
那么两个组件之间是没有父子关系的吧？
你能检查问题吗。

标签： reactjs react-native react-navigation

【解决方案1】：

如果必须从子组件更新

您必须从持有 state 的组件传递 Handlers 来更新值，子组件可以利用这些处理程序来更新 state

如果您必须从其他位置更新

您必须执行 level up 状态并遵循上述相同。

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>
  }
 }

【讨论】：

谢谢，但是没有父子关系
我想从侧边菜单改变状态。
不是 OP 正在寻找的答案，但绝对是我的答案，所以 +1。谢谢！

【解决方案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);

【讨论】：

@KhurshidAnsari Redux 确实是解决此类问题的方法。 redux.js.org/basics/basic-tutorial
我尝试了很多，但我找不到解决方案。现在我要使用 redux 可以建议简单的 redux 示例
@KhurshidAnsari redux 是一个非常强大的工具......我想如果你能花点时间学习它会很棒......不仅仅是为了手头的用例，而且对于我相信您将要面对的许多用例...但是，redux 一开始并不容易理解...但是一旦您掌握了窍门，它将非常容易设置并使用... 免费教程：youtube.com/results?search_query=redux+tutorial 付费教程（我强烈推荐）... Steve Grider in udemy udemy.com/user/sgslo
@KhurshidAnsari 祝你好运！

【解决方案3】：

当您导航到下一个屏幕时，在参数中传递此函数，

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

在您的侧边菜单屏幕中，使用 props 调用它，

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

【讨论】：

我正在打开像 this.props.navigation.openDrawer() 这样的侧边菜单

【解决方案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}/>
);
}

}

【讨论】：