Question

我正在尝试做一个简单的弹出菜单，该菜单是通过标题栏中的按钮触发的。但是，当菜单关闭时（从单击菜单或再次单击按钮），我得到了未处理的承诺拒绝。

在Menu类打开和关闭菜单之前和之后，我已经打印了一些控制台日志，这样我可以看到状态正确设置了。我不确定是什么原因造成的。

在我的AppMenu类中，我有：

<router-outlet></router-outlet>

在App.js中，我有：

constructor(props) {
    super(props);
    this.state = { opened: false };
    this.onTriggerPress = this.onTriggerPress.bind(this);
    this.onBackdropPress = this.onBackdropPress.bind(this);
    this.onClose = this.onClose.bind(this);
  }

  onTriggerPress() {
    console.log('onTriggerPress Start ' + this.state.opened);
    this.setState({ opened: true });
  }

  onClose() {
    console.log('onClose Start ' + this.state.opened);
    this.setState({ opened: false });
  }

  onBackdropPress() {
    console.log('onBackdropPress Start ' + this.state.opened);
    this.onClose();
  }

  render() {
    const { opened } = this.state;
    console.log('Rendering with state: ' + this.state.opened);
    return (
      <Menu
        opened={opened}
        onClosed={this.onClose}
        onBackdropPress={this.onBackdropPress}
        renderer={Popover}
        rendererProps={{ preferredPlacement: 'bottom' }}
      >
        <MenuTrigger onPress={this.onTriggerPress} style={styles.menuTrigger}>
          <Icon
            name="bars"
            size={28}
            style={{ paddingLeft: 10, color: '#e8eaed' }}
          />
        </MenuTrigger>
        <MenuOptions style={styles.menuOptions}>
          <Text style={styles.contentText}>Hello world!</Text>
        </MenuOptions>
      </Menu>
    );
  }

在App.js中，我也有用于反应导航的导航选项：

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={<Text>Loading...</Text>} persistor={persistor}>
          <MenuProvider backHandler={true}>
          <AppContainer />
          </MenuProvider>
        </PersistGate>
      </Provider>
    );
  }
}

请帮助！谢谢！

未处理的承诺拒绝：TypeError [object，Object] [object，Object]是不可迭代的

0 个答案: