如何在类组件中从父级获取孩子的状态

Question

我试图在父组件中显示子组件的状态，但不知何故，文本“abcde”仍然没有显示，这是示例代码

import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-ui-lib';

class ChidComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
  }
  render() {
    return (
      <SafeAreaView>
        <TouchableOpacity
          onPress={() => {
            this.setState({text: 'abcde'});
            this.props.getText(this.state.text);
          }}>
          <Text>Get Text</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

const style = StyleSheet.create({
  text: {
    fontWeight: 'bold',
    fontSize: 40,
  },
});
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
  }
  getTextFromChild(value) {
    this.setState({text: value});
  }
  render() {
    return (
      <SafeAreaView>
        <Text>{this.state.text}</Text>
        <ChidComponent
          getText={this.getTextFromChild.bind(this)}
          press={() => this.setState({show: !this.state.show})}
          textStyle={style.text}
        />
      </SafeAreaView>
    );
  }
}
export default ParentComponent;

但不知怎么的，屏幕仍然是空的，“abcde”直到我点击两次，来自功能组件，所以我不知道发生了什么，请帮助，非常感谢

Answer 1

您的ParentComponent中的getTextFromChild方法正在从状态中删除show属性，请将其更新为：

 getTextFromChild(value) {
    this.setState({text: value, show: true });
  }

编辑：setState是异步的，您可以通过回调函数作为参数来访问更新的状态。

   <TouchableOpacity
          onPress={() => {
            this.setState({text: 'abcde'}, () => {
              this.props.getText(this.state.text);
           }); 
   }}>

应该有用。