根据所选按钮对应用程序中显示的本机更改数据进行反应

Question

在应用程序的顶部，我有3个按钮：Load1，Load2，Add。

Load1 =>加载data1并显示内容

Load2 =>加载data2并显示内容

添加=>添加数据

3个按钮：

class Comp1 extends Component {
    ...
    renderMainPage() {
      switch (this.state.selectedButton) {
        case 'load1':
          return <ListComp status="load1" />;
        case 'closed':
          return <ListComp status="load2" />;
        case 'add':
          return <AddComp status="add" />;
      default:
        break;
    }
  }
    ...
    render() {
        <View style={{ flex: 1 }}>
           <Button onPress={() => this.setState({ selectedButton: 'load1' })} > <Text>Load1</Text>
           </Button>
           <Button onPress={() => this.setState({ selectedButton: 'load2' })} > <Text>Load2</Text>
           </Button>
           <Button onPress={() => this.setState({ selectedButton: 'add' })} > <Text>Add</Text>
           </Button>
           {this.renderMainPage()}
        </View>
    }
}

按钮可以正常工作并加载正确的内容。 ListComp：

componentDidMount() {
    this.getData();
}

getData = async () => {
    if (this.props.status === 'load1') {
      await this.props.getLoad1();
    } else if (this.props.status === 'load2') {
      await this.props.getLoad2();
    }
    this.setState({
      myData: this.props.data
    });
};

然后，AddComp只是一个表单组件。默认情况下使用“ Load1”数据加载。然后，我单击“ Load2”，它获取load2数据。然后，我单击“添加”，然后再单击“ Load1”。它将转到this.props.getLoad1()，但未更新“ myData”。

如果我不断在“ Load1”和“ Load2”之间切换，则可以正常工作。