Question

我正在尝试从我的PouchDB数据库中填充菜单列表，但是在调用get进入数据库后，我似乎无法从我调用的诺言中返回任何内容。

这是我的代码：

<MenuList>
   {this.populateSavedClues()}
</MenuList>
.
.
.
populateSavedClues() {
    var db = this.db;
    db.get('roomClues').then(function (doc) {
        if (doc.clues == null || doc.clues == array()) {
          return <MenuItem onClick={() => this.handleClose()} align='start' size='small' >You have no saved clues for this room</MenuItem>;
        }
        else {
          return doc.clues.map((clue) => <MenuItem onClick={() => this.selectClue(clue)} align='start' size='small' >{clue}</MenuItem>);
        }
    }).catch(function (err) {
        if(err.name=="not_found") {
          return <MenuItem onClick={() => this.handleClose()} align='start' size='small' >You have no saved clues for this room</MenuItem>;
        }
    });
  }

现在，我正在专门测试捕获条件。我知道一个事实，它击中了我的测试中未找到的命中，并击中了其中的return语句，但是我的菜单没有任何项目，仍然为空。我已经在promise之外进行了测试，只是使此函数返回菜单项而没有其他逻辑，并且它也可以正常工作，所以它涉及尝试在catch promise中返回，而我不知所措，试图找出为什么返回不会一直到MenuList调用。我需要怎么做才能返回菜单项？

Answer 1

renderMenu() {
        let jsx;
        if (this.state.clues.length == 0) {
            jsx = <MenuItem onClick={() => this.handleClose()} align='start' size='small' >You have no saved clues for this room</MenuItem>
        } else {
            jsx = this.state.clues.map((clue) => {
                return <MenuItem onClick={() => this.selectClue(clue)} align='start' size='small' >{clue}</MenuItem>
            })
        }

        return jsx;
    }

    async populateSavedClues() {
        var db = this.db;
        try {
            const doc = await db.get('roomClues');
            return doc;         

        } catch (error) {
            alert('Error fetching clues...')
        }
    }



async componentDidMount() {

        const doc=  await this.populateSavedClues();

        this.setState({ clues: doc.clues });
    }

在您的JSX中：

<MenuList>
   {this.renderMenu()}
</MenuList>

请记住在您的状态下放置一个“线索”（空数组）属性。希望这会有所帮助。

似乎无法从承诺中恢复

1 个答案: