如何从同一文件但类别类别的其他类中调用SetState

Question

我调用我的profilescreen类中的函数，该函数在同一.js文件中。我成功地做到了这一点，但是在该功能中，一个setState被调用，当该函数从其他类调用时，状态不会改变。如何在主页中获取this.state.user，从profilescreen类中调用onpresslogout函数？

export default class HomePage extends Component<Props> {
 state = {
 email:'',
 password:'',
 firstname:'',
 lastname:'',
 user:true,
 error: '',
 }
 onPressLogout(){
    firebase = require('firebase');
    firebase.auth().signOut()
    .then(() => this.setState({
      user:false
    }))
    .catch(() => this.setState({
      error: 'Logout Failure',
  }))
 }
 render(){
  return <AppContainer>
  </AppContainer>;
  }
 }

class ProfileScreen extends React.Component {
 constructor(props) {
 super(props);
 Obj = new HomePage();
 }
 render() {
  return (
  ...
      <TouchableOpacity style={styles.button} onPress = 
         {()=>Obj.onPressLogout()}>
      </TouchableOpacity>
  ...
  }
 }
const TabNavigator = createBottomTabNavigator({
Profile: ProfileScreen,
});
const AppContainer = createAppContainer(TabNavigator);

运行代码时会收到此警告，并且 this.state.user 不更改：

警告：无法在尚未提及的组件上调用" setState"。

Answer 1

您应该将父元素的函数传递到子元素中，作为一个道具。然后，您可以在孩子中称其为操纵父级的状态。

这是一个例子，

class ChangeButton extends React.Component{
  render(){
    return (
      <Button title="Change" onPress={this.props.updateMainState}/>
    )
  }
}
export default class App extends React.Component {
  state = {
    name: 'Fatih'
  }
  changeName = ()=> {
    this.setState({
      name: 'Faruk'
    })
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>
          {this.state.name}
        </Text>
        <ChangeButton updateMainState={this.changeName}/>
      </View>
    );
  }
}

在上面的代码中，我们将ChangeName函数传递到了ChangeButton元素中。 cansterbutton 在按下它时调用父元素的函数，该功能会操纵主类的状态。

这是工作代码： ProjectLink