javascript - React JS : Filtering an array of objects by another array of objects. 如何顺序执行四个函数，包括。多次 API 调用

Question

目标是通过另一个对象数组过滤一个对象数组。每个数组都来自不同的源。

以下设置可能看起来很奇怪，但不幸的是，出于此处未提及的几个原因，这是必要的。

• 第一步是从 Firebase 数据库获取一组对象，其中包含一些(最新)上传的帖子(所有帖子)的元数据。
• 在第二步中，该数组将根据用户 ID 和文本 ID (filterArrayIds) 进行过滤。
• 在第三步中，对于每个过滤后的用户 ID，将调用 API 以获取相应用户 ID 的所有现有帖子的详细信息。这些将合并到一组帖子中 (fetchJSONFiles)。
• 在第四步中，应针对第二步的 textid 数组 (filterJSON) 中的所有 textid 过滤此合并的帖子数组。

下面是我到目前为止的解决方案。不幸的是，我无法使其按顺序执行函数，因此尤其是 fetchJSONfiles() 在调用 filterJSON() 之前完全完成。

我被困在这里几个小时了……非常感谢任何帮助，这会让我很开心。谢谢!

示例数据:

allposts: [
  {
    dateofpost: "1539181118111",
    textid: "1",
    userid: "Alice",
  },
  {
    dateofpost: "1539181118222",
    textid: "3",
    userid: "Bob",
  },
]

-

allfilteredTexts: [
  {
    title: "Lorem",
    textid: "1",
  },
  {
    title: "Ipsum",
    textid: "2",
  },
  {
    title: "Dolor",
    textid: "3",
  },
]

预期结果:

latestPosts: [
  {
    title: "Lorem",
    textid: "1",
  },
  {
    title: "Dolor",
    textid: "3",
  },
]

到目前为止我的解决方案:

class Explore extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allposts: [],
      textids: [],
      userids: [],
      allfilteredTexts: [],
    };
  }

  componentDidMount() {
    const allfilteredTexts = {...this.state.allfilteredTexts}
    firebase
      .firestore()
      .collection("allposts")
      .orderBy("dateofpost")
      .get()
      .then(snapshot => {
        const allposts = this.state.allposts;
        snapshot.forEach(doc => {
          allposts.push({
              userid: doc.data().userid,
              textid: doc.data().textid,
              dateofpost: doc.data().dateofpost,
          });
        });

        this.setState({
          allposts: allposts,
        });
      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
      })
      .then(() => {
              this.filterArrayIds();
      })
      .then(() => {
              this.fetchJSONFiles();
      })
      .finally(() => {
              this.filterJSON();
      });

    }


    filterArrayIds() {
      var userids = this.state.userids
      var textids = this.state.textids
      if (this.state.allposts) {
        var filtereduserids = [...new Set([].concat(...this.state.allposts.map(o => o.userid)))];
        var filteredtextids = [...new Set([].concat(...this.state.allposts.map(p => p.textid)))];
        this.setState({
            userids: filtereduserids,
            textids: filteredtextids,
        })
      }
    }

    fetchJSONFiles() {
      if (this.state.userids) {
         this.state.userids.forEach((username) => {
            var filteredTexts = []
            const options = {username} //here would be more API options //
            getFile(options)
              .then((file) => {
                filteredTexts = JSON.parse(file || '[]');
              })
              .then (() => {
                Array.prototype.push.apply(filteredTexts, this.state.allfilteredTexts);
                this.setState({
                  allfilteredTexts: filteredTexts,  
              })
          })
      }
    }

    filterJSON(){
          let latestPosts = (this.state.allfilteredTexts.filter(
            (el) => { return el.id.indexOf(this.state.textids) !== -1;
            }));
    }

    render () {

      return (
        <div>
              <Switch>
                <Route
                  path='/explore/latest/'
                  render={(props) => <ExploreLatest {...props} allposts={this.state.allposts} allfilteredTexts={this.state.allfilteredTexts} />}
                />
              </Switch>
        </div>
      )
    }
}
export default Explore;

Answer 1

我建议像这样修改:

fetchJSONFiles() {
      if (this.state.userids) {
         return Promise.all(this.state.userids.map((username) => {
            var filteredTexts = []
            const options = {username} //here would be more API options //
            return getFile(options)
              .then((file) => {
                filteredTexts = JSON.parse(file || '[]');
              })
              .then (() => {
                Array.prototype.push.apply(filteredTexts, this.state.allfilteredTexts);
                this.setState({
                  allfilteredTexts: filteredTexts,  
              })
          }))
      }
    }

那么接下来的几行是:

 .then(() => {
          this.fetchJSONFiles();
  })

可以成为:

 .then(() => {
          return this.fetchJSONFiles();
  })

为什么？

原因fetchJSONFiles没有在 Promise 链的其余部分之前完成是因为 Promise 链不知道要等待 fetchJSONFiles 的结果。 fetchJSONFiles进行异步调用，因此其余同步代码继续执行。

但是，通过从 fetchJSONFiles 返回 Promise，我们有一些东西可以“等待”。这使用了功能 Promise.all ，它基本上是说“创建一个 promise ，当这一系列 promise 中的每个 promise 完成时，该 promise 就完成”。

而不是 forEach我们使用map ，因为这允许我们基于基本数组创建一个新数组，而不是仅仅循环它。然后而不是仅仅打电话 getFile ，我们返回 Promise 链。因此，我们从 this.state.userids 创建一个 Promise 数组。 ，并创建一个 Promise，当使用 Promise.all 完成所有提取时，该 Promise 将会解析。 .

然后我们将其返回到位于 componentDidMount 的初始 Promise 链中。这告诉链在继续之前等待该 Promise 的结果(该 Promise 是 this.fetchJSONFiles 的结果)完成，在这种情况下，这将涉及执行 finally 。回调。

<小时/>

现在，还有一些其他的考虑因素需要......考虑。也就是说，如果 fetchJSONFiles 之一出现错误，会发生什么情况？称呼？这是你必须考虑的事情，但这些改变应该会让你开始并运行到你想要的地方。