我建立一个阵营的形式,将有填充了MongoDB的数据几个下拉框。我是比较新的反应,并用MongoDB的初学者。
我开始与只是想用它一个下拉创建一个基本的页面。一旦我得到这个权利,我可以继续添加其他的下拉菜单。
我已经能够通过只是临时抱佛脚所有的代码到一个文件中顺利拿到数据到下拉。现在,我想开始通过适当分割块放入单独的文件重构代码。而这也正是我遇到的问题。
我打出了我的MongoDB的数据拉(使用蒙戈针)到一个单独的“服务”文件。我仍然通过新的服务文件中获取数据。但是,当我再尝试该服务的文件数据拉进我的主要(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文件的正确途径。
另外,顺便说一下,我认识到,拥有在这个文件我蒙戈连接信息是一个巨大的安全漏洞。我会在以后固定。
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);
});
}
它看起来像你使用destructuring获得由data
返回一个对象getProjects()
成员,但getProjects()
不会与这样的成员返回一个对象。
也许你想改变它的东西像下面 -
async fetchProjects() {
const projects = await getProjects();
console.log(projects);
this.setState({ projects });
}
此外,像@Win提到,在P
的projects
大写在您的状态初始化而不是事后。你可能会想解决这个问题。
我发现我的问题归结为一个事实,我的数据不会在componentDidMount生命周期挂钩到达很快。因此,在处理移动时,“项目”的数据仍然是不确定的。换句话说,我的“异步/ AWAIT”不是。 。 。等待!
我会把我如何可以使异步等待,直到我真正找回数据一个单独的问题。但同样,只是想纪念这个为“解决”,因为问题不在于下游发生从数据中获取。数据根本没有到达很快。