使用 useEffect() Hook 和 Async/Await 从 Firebase/Firestore 获取数据

Question

1.我的意图：

使用useEffect()钩子从道具初始化组件的状态变量，道具的数据是使用mapStateToProps()从firebase提取的。

---

2. 问题：无法初始化组件的状态变量

• 这个想法是当组件安装时 useEffect 只会运行一次。在这个初始化窗口中，我想将数据从 firebase 加载到这个组件的本地状态变量。

• 运行本教程中的示例时，它运行良好。在其中，他使用async/await函数中的 axios() 获取数据。有关他的代码，请参阅下面的第 3 节。

• 但是当我这样做时，尝试从与 Firestore 同步或初始化的道具中获取数据时，我一直为空，无法result从我的 async/await 函数返回的数据中检索数据。

• 我认为这是因为我对 async/await 缺乏了解。我无法创建有效的async/await函数来从 props 检索数据。

题：

我怀疑这就是问题所在。那么，编写从与 firebase 同步的 props 中正确检索数据的async/await函数的正确方法是什么？

我的问题代码：

    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);

---

我试过的：

• 如果我将订单添加到第二个参数中，那么它将正确地将数据加载到组件的状态变量中。但它会将道具的数据重新加载到组件的状态变量中，并清除每个重新渲染周期中的任何更改。

 useEffect(() => {
        ...
      }, [order]);

• mapStateToProps()是否在初始组件安装后发生？因为这将解释为什么在初始效果中， props 总是空的。

---

3.我遵循的教程：使用钩子获取数据

我能够使用本教程中的技术成功获取数据：

  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();
  }, []);

Answer 1

尝试这个：

const app = props => {
        const [data, setData] = useState({ results: [] });
          useEffect(() => {
            const getData = async () => {
              const result = await axios('Your URL here');
              setData(result.data);
            };
            getData();
          }, []);

    ...