如何在链接的`.then()`中运行函数？答案

【问题标题】：How to run a function in a chained `.then()`?如何在链接的`.then()`中运行函数？
【发布时间】：2020-03-15 11:47:11
【问题描述】：

一旦函数异步，我在链式.then() 中运行函数时遇到问题。

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import Search from "./Search";
import * as BooksAPI from "./BooksAPI";

import "./App.css";

class BooksApp extends React.Component {
  state = {
    books: []
  };

  componentDidMount() {
    BooksAPI.getAll().then(books => {
      this.setState({ books: books });
    });
  }

  changeShelf = (book, shelf) => {
    BooksAPI.update(book, shelf);

    BooksAPI.getAll().then(books => {
      this.setState({ books: books });
    });
  };

  render() {
    return (
      <div className="app">
        <Switch>
          <Route
            exact
            path="/"
            render={() => (
              <Home books={this.state.books} changeShelf={this.changeShelf} />
            )}
          />

          <Route
            path="/search"
            render={() => (
              <Search changeShelf={this.changeShelf} books={this.state.books} />
            )}
          />
        </Switch>
      </div>
    );
  }
}

export default BooksApp;

注释是针对这部分代码的：

changeShelf = (book, shelf) => {
  BooksAPI.update(book, shelf);

  BooksAPI.getAll().then((books) => {

    this.setState({
      books: books
    })

  })

}

render() {

    return (

接下来，我向你展示我收到的评论：

【问题讨论】：

评论已经告诉你需要做什么，参考你已经写的其他代码。究竟是什么不清楚？
类似于你已经链接BooksAPI.getAll().then()的方式。
嗨，@jonrsharpe，感谢您的反馈。我想要一个建议，因为我无法完全实现我以前做过的事情。我试过很多方法，都没有。也许有一些我没有看到的不同细节，我不知道。
我很困惑。该帖子显示了一条带有正确方法的评论。有什么问题？
@jose-renato-m 不用担心，我只是不确定这里缺少什么。看来你已经有了答案，不是吗？

标签： javascript node.js reactjs asynchronous

【解决方案1】：

按照建议将BooksAPI.getAll 放在BooksAPI.update 的then-block 中。

BooksAPI.update(book, shelf).then(()=>{
  BooksAPI.getAll().then((books) => {

    this.setState({
      books: books
    })

  })
});

【讨论】：

我没有写三遍，我不敢相信你们没有人知道这一点，但是：如果你真的返回承诺，你不必创造带有.thens 的经典回调金字塔。
所以你是在告诉我代码已经可以工作了？我对此表示强烈怀疑。这两种方法将几乎同时异步触发。
感谢您的解释。我确实知道这一点。但考虑到教程提供的错误消息或任何内容，上述代码仍然是解决方案。它不是最好的解决方案，但它是本教程所期望的。
它的风格很差（考虑到我们之前的 cmets），并且没有考虑到问题本身提供的整个解决方案。
@Emile Bergeron，我正在考虑回调地狱并且做错了。根据审阅者的建议，我正在尝试相应地改进代码。

【解决方案2】：

这里的问题是 BooksAPI.update 和 BooksAPI.getAll 的执行顺序不能保证，因为它们都返回一个 Promise 实例 - 它们是异步执行的。如果您的意图是（首先）更新一本书并（然后）获取所有书籍，则代码应类似于以下内容：

BooksAPI.update(book, shelf)
    .then(() => {
        BooksAPI.getAll()
            .then(allBooks => this.setState({ books: allBooks }));
    });

【讨论】：

stackoverflow.com/questions/58942828/…