Question

我正在构建一个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);
    });
}

Answer 1

似乎您正在使用destructuring从data返回的对象中获取getProjects()成员，但是getProjects()不会返回具有这样的对象的对象成员。

也许您想将其更改为以下内容-

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

此外，就像提到的@Win一样，P中的projects在您的状态初始化中大写，但之后没有大写。您可能想解决该问题。

Answer 2

我发现我的问题归结为以下事实：我的数据没有足够快地到达componentDidMount生命周期挂钩中。因此，当过程继续进行时，“项目”数据仍未定义。换句话说，我的“异步/等待”不是。。。等待中！

我将发布一个单独的问题，该问题是如何使异步等待直到我真正获得数据。但是，再次想将其标记为“已解决”，因为问题不在数据获取的下游发生。只是数据还不够快。

ReactJS错误-“无法读取未定义的属性'data'”

2 个答案: