我正在构建一个 React 表单，其中将包含多个下拉框，其中包含来自 MongoDB 的数据。我对 React 还比较陌生，对 MongoDB 也只是个初学者。

我刚开始尝试创建一个带有一个下拉菜单的基本页面。一旦我做对了，我就可以继续添加其他下拉菜单。

我只需将所有代码塞进一个文件，就能成功地将数据放入下拉菜单中。现在，我正尝试通过将代码正确地拆分成单独的文件来重构代码。这就是我遇到问题的地方。

我已将 MongoDB 数据提取（使用 Mongo Stitch）拆分成单独的“服务”文件。我仍然通过这个新的服务文件获取数据。但是当我尝试将该服务文件数据提取到我的主页面（App.js）时，我收到了“无法读取未定义的属性‘数据’”错误。因此，很明显，我尝试将数据拉入 App.js 文件的方式是错误的。如果有人能提供任何专家见解，我将不胜感激！

这是我的 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);
    });
}