React–Async/Await似乎没有在等待

Question

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

我正在构建一个React表单，它将有几个下拉框，其中填充了来自MongoDB的数据。我是React的新手，也是MongoDB的初学者。

我只需将所有代码塞进一个文件中，就可以成功地将数据放入下拉列表中。现在，我正试图通过正确地将代码片段分割成单独的文件来开始重构代码。这就是我遇到的"数据延迟"问题。

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

我已经能够使这个过程在"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);
});
}

Answer 1

我认为在getProjects()服务中添加退货将解决您的问题。

import {
Stitch,
RemoteMongoClient,
AnonymousCredential
} from "mongodb-stitch-browser-sdk";
export function getProjects() { //add async if you need to await in func body
const client = Stitch.initializeDefaultAppClient("------");
const db = client
.getServiceClient(RemoteMongoClient.factory, "-----")
.db("----------"); // if these above are async, then await them as well.
// added return keyword here
return client.auth // should return Promise to await in your component
.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);
});
}

编辑1:

对于重构，我认为将redux和redux-saga配对可以很好地分离关注点，并且如果您计划这样做的话，可以很容易地编写测试。但总的来说，我认为以上的调整至少可以解决你的问题。