Question

我从同一.js文件中的ProfileScreen类调用了Homepage类中的函数。我成功地做到了，但是在该函数中调用了setState，并且从另一个类中调用该函数时，状态不变。如何通过调用ProfileScreen类中的onPressLogout函数来更改HomePage中的this.state.user？

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元素。按下 ChangeButton 中的Button时，它会调用父元素的功能，从而操纵主类的状态。

以下是工作代码：ProjectLink

如何从相同文件但不同类中的不同类调用setState？

1 个答案: