reactjs - useEffect 返回具有空值的上下文函数

Question

我正在使用由三个文件组成的上下文配置（不是 redux）。状态文件、reducer 文件和上下文文件。它对我的 Atlas MongoDB 集合进行 axios 调用。我已经使用 Postman 测试了 API，get 请求按预期工作，返回了一系列事务数据。

useEffect 挂钩中的 getTransactions() 函数只会返回一次请求的数据。如果我对代码进行任何修改并保存或导航到不同的页面并返回，那么现在将对象的事务数组定义为空。我的第一直觉是我有一个异步语法错误，但我对 useEffect 的理解是它缓解了异步问题。

有问题的函数如下所示：

const initialState = {
    transactions: null,
    current: null,
    filtered: null,
    error: null
  };

  const getTransactions = async () => {
    try {
      const res = await axios.get("/api/transactions");

      dispatch({ type: GET_TRANSACTIONS, payload: res.data });
    } catch (err) {
      dispatch({ type: TRANSACTION_ERROR, payload: err.response.msg });
    }
  };

reducer 在 switch 语句中处理 state 函数调度的类型：

    case GET_TRANSACTIONS:
      return {
        ...state,
        transactions: action.payload,
        loading: false,
      };

我在我的反应组件中进行了以下调用：

  useEffect(() => {
    getTransactions();
    // eslint-disable-next-line
  }, []);

我的 API 在节点服务器上运行，该节点服务器使用首先检查用户身份验证然后查询数据库的路由。再次，API 已经过测试，并按预期返回数据，因为标头中有有效的 JWT 身份验证令牌。路线如下：

router.get("/", auth, async (req, res) => {
  try {
    const transactions = await Transaction.find({ user: req.user.id }).sort({
      date: -1,
    });
    res.json(transactions);
  } catch (err) {
    console.error(err.message);
    res.status(500).send("Server Error");
  }
});

我需要能够在我的组件中以称为事务的对象数组的形式一致地返回数据，以便可以将其映射以填充 DOM 元素。我已尝试在此处提供我认为相关的尽可能多的代码，但如果我遗漏了什么，我可以分享。所有必需的进口都经过双重检查并且是正确的。为了节省空间，我没有在这个问题中包含导入行。提前致谢！

标签： reactjsaxiosuse-effectreact-context