上下文 api 值在用于函数计算时读取 NaN，但在单独记录到控制台时返回数字

Question

我正在尝试使用从 api 端点获取的数字来获取数字的百分比，该端点是我使用上下文 api 全局保存的，但每次我将数字传递给进行计算的函数时，它都会返回 NaN，但是当我记录用于的输入时控制台上的计算显示了实际数字。

import React, { createContext, useState, useContext } from "react";
import { FormatNum } from "../utils/FormatNum";
import { useFetchUsersData } from "../hooks/useFetchUsersData";

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const onError = (error) => {
    console.log("Error:", error);
  };

  const enabled = true;
  const endpoint = "growthData";
  const { data } = useFetchUsersData({ endpoint, enabled, onError });

  const totalUser = data?.data.reduce((accumulator, currentItem) => {
    return accumulator + currentItem.users;
  }, 0);

  const totalActiveUsers = data?.data.reduce((accumulator, currentItem) => {
    return accumulator + currentItem.activeUsers;
  }, 0);

  const [totalUsers, setNumberOfUsers] = useState(Number(totalUser));
  const [activeUsers, setActiveUsers] = useState(Number(totalActiveUsers));
  const [percentActiveUsers, setPercentActiveUsers] = useState(0);

  const calculatePercent = (total) => {
    console.log("value:", total);
    if (total && total > 0) {
      return (activeUsers / totalUsers) * 100;
    }
    return 0; // Return 0 if totalUsers is not valid or zero to avoid NaN
  };

  const updateNumberOfUsers = (newNumber) => {
    setNumberOfUsers(FormatNum(newNumber));
  };

  const updateActiveUsers = (newNumber) => {
    setActiveUsers(FormatNum(newNumber));
  };

  const updatePercentActiveUsers = (newNumber) => {
    setPercentActiveUsers(FormatNum(newNumber));
  };

  return (
    <UserContext.Provider
      value={{
        totalUsers,
        updateNumberOfUsers,
        activeUsers,
        updateActiveUsers,
        percentActiveUsers,
        updatePercentActiveUsers,
        calculatePercent,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

// Custom hook to use the UserContext
export const useUserContext = () => {
  return useContext(UserContext);
};

这是我传递数据的地方，因为我尝试的所有其他方法都不起作用

import React from "react";
import { HiOutlineUsers } from "react-icons/hi2";
import { useUserContext } from "../../context/usersData";
import ActiveUsersPieChart from "../Charts/ActiveUsersPieChart";

const ActiveUsersPieCard = () => {
  const {
    activeUsers,
    totalUsers,
    percentActiveUsers,
    updatePercentActiveUsers,
    calculatePercent,
  } = useUserContext();

  console.log(totalUsers);
  const percent = calculatePercent(totalUsers);
  updatePercentActiveUsers(Number(percent));
  console.log(percent);
  console.log(activeUsers);
  console.log(totalUsers);

  return (
    <div className="md:w-full md:h-[430px] flex flex-col bg-blue-800 shadow-md rounded-lg p-5">
      <section className="md:ml-4">
        <div className="flex gap-2 items-center">
          <HiOutlineUsers size={20} />
          <h3 className="text-xl">Percentage of users active</h3>
        </div>
        <p className="text-2xl font-semibold mt-2 mb-5">{percentActiveUsers}</p>
      </section>

      <ActiveUsersPieChart />
    </div>
  );
};

export default ActiveUsersPieCard;

Answer 1

在执行 fn 操作之前尝试使用异步函数等待数据