【发布时间】：2020-02-02 06:17:35
【问题描述】：
1。我的意图：
使用 useEffect() 钩子从 props 中初始化组件的状态变量，其数据是使用 mapStateToProps()从 firebase 中提取的>。
2。问题：无法初始化组件的状态变量
这个想法是 useEffect 只会在组件挂载时运行一次。在这个初始化窗口中，我想将数据从 firebase 加载到这个组件的本地状态变量中。
running the example in this tutorial 时可以正常工作。在其中，他在 async/await 函数中使用 axios() 获取数据。有关他的代码，请参见下面的第 3 节。
但是当我这样做时，尝试从与 Firestore 同步或初始化的道具中获取数据时，我一直为 null，无法从我的异步/等待函数返回的
result.我认为这是因为我对 async/await 缺乏了解。我无法创建有效的 async/await 函数来从道具中检索数据。
问题：
我怀疑这就是问题所在。那么，编写 async/await 函数以正确检索与 firebase 同步的道具中的数据的正确方法是什么？
我的问题代码：
import React, { useState, useEffect} from "react";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import { compose } from "redux";
const app = props => {
const { order } = props;
const [data, setData] = useState({});
useEffect(() => {
const fetchData = async () => {
const result = await (() => {
return new Promise(resolve => {
if (order) { resolve(order); }
});
})();
setData(result);
};
fetchData();
}, []);
/** if I leave useEffect's second argument empty, which is intended to run only once at the beginning, then i'm getting null */
...
const mapStateToProps = state => {
const id = "DKA77MC2w3g0ACEy630g"; // docId for testing purpose.
const orders = state.firestore.data.orders;
const order = orders ? orders[id] : null;
return {
order: order
};
};
export default compose(
connect(mapStateToProps),
firestoreConnect([{collection: "orders"}])
)(app);
我的尝试：
- 如果我将 order 添加到第二个参数中，那么它将正确地将数据加载到组件的状态变量中。但它会将道具的数据重新加载到组件的状态变量中，并在每个重新渲染周期中清除所有更改。
useEffect(() => {
...
}, [order]);
- mapStateToProps() 是否发生在初始组件装载之后？因为这可以解释为什么在初始效果中，道具总是空的。
3。我正在学习的教程：使用钩子获取数据
我能够使用techniques from this tutorial成功获取数据：
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
"https://hn.algolia.com/api/v1/search?query=redux"
);
setData(result.data);
};
fetchData();
}, []);
【问题讨论】：
-
您的数据不是已经被
firestoreConnect获取并且在props中可用吗？尝试将props记录到控制台。 -
这不是你问题的确切答案，但我想这是你的问题之一，async/await 函数本身就是产生承诺的生成器的糖语法，所以你不需要等待为了一个承诺
标签： reactjs firebase promise async-await react-redux