react-native - React Native 根据所选按钮显示在应用程序中的更改数据

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”之间切换，它工作得很好。

标签： react-native