React – Async / Await 似乎没有等待

我之前在“无法读取未定义的属性'数据'”的错误消息下发布了此问题。但是在深入研究几个小时的过程中，我发现我的问题实际上归结为我的“async/await”似乎不是。. . . 等待！是的，我确实检查了这里已经问过的这个问题的其他几个版本。:)

我正在构建一个 React 表单，其中有几个下拉框填充了来自 MongoDB 的数据。我对 React 比较陌生，也是 MongoDB 的初学者。

通过将所有代码塞入一个文件中，我已经能够成功地将数据放入下拉列表中。现在，我正在尝试通过将片段正确拆分为单独的文件来开始重构代码。这就是我遇到“数据延迟”问题的地方。

当“componentDidMount”调用“fetchProjects”函数时，该函数会使用“projects service”文件中的“getProjects”函数从MongoDB获取项目列表。当“fetchProjects”中的console.log 运行时，它返回未定义。但是在数据集返回为未定义（并在过程中出错）之后，我确实从“getProjects”函数中获得了项目对象数组的控制台日志。

我已经能够在“getProjects”函数中使用硬编码的对象数组数据来处理这个过程，所以这告诉我问题在于从 MongoDB 实际获取数据所需的时间量。

请告诉我有一种方法可以在不使用 Redux 的情况下解决这个问题！:D

这是我的 App.js 文件 –

import React, { Component } from "react";
import "./App.css";
import { getProjects } from "./services/svcProjects";

class App extends Component {
  state = {
    data: {
      selProject: ""
    },
    projects: []
  };

  async componentDidMount() {
    await this.fetchProjects();
  }

  async fetchProjects() {
    const { data: projects } = await getProjects();
    console.log(projects);
    this.setState({ projects });
  }

  render() {
    return (
      <div className="App">
        <h1>Project Log</h1>
        <label htmlFor={"selProject"}>{"Project"}</label>
        <select name={"selProject"} id={"selProject"} className="form-control">
          <option value="" />
          {this.state.projects.map(a => (
            <option key={a._id} value={a.project}>
              {a.project}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

export default App;

这是“项目服务”文件。同样，请注意这里的 console.log 语句表明我仍在从 MongoDB 获取数据。该数据需要很长时间才能返回 App.js 文件。

另外，顺便说一下，我意识到在这个文件中包含我的 Mongo 连接信息是一个巨大的安全漏洞。我稍后会解决这个问题。

import {
  Stitch,
  RemoteMongoClient,
  AnonymousCredential
} from "mongodb-stitch-browser-sdk";

export function getProjects() {
  const client = Stitch.initializeDefaultAppClient("------");
  const db = client
    .getServiceClient(RemoteMongoClient.factory, "-----")
    .db("----------");
  client.auth
    .loginWithCredential(new AnonymousCredential())
    .then(() =>
      db
        .collection("--------")
        .find({}, { sort: { Project: 1 } })
        .asArray()
    )
    .then(res => {
      console.log("Found docs", res);
      console.log("[MongoDB Stitch] Connected to Stitch");
      return res;
    })
    .catch(err => {
      console.error(err);
    });
}