使用useEffect钩子获取数据

Question

我有一个从 API（nodeJS 服务器）获取数据的组件。我所有的获取代码都是一个 useEffect 挂钩。但是在运行代码时，useEffect 代码不会运行，因为我无法看到我的 console.log 语句并且我的状态未设置。

我的代码有什么问题吗，因为我参考了网上的文章并尝试了很多方法 一旦 useEffect 运行，我如何设置我的状态变量并且任何帮助理解 useEffect 都会有所帮助。

export default function SummaryContainer() {
  /* const { transactions, setTransactions } = useTransactionContext(); */
  let apiData = null;
  const [summary, setSummary] = useState([]);
  useEffect(() => {
    const url = "http://localhost:3000/getExpenseSummary";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        console.log("Fetched Data");
        setSummary(data);
      } catch (error) {
        console.log("error", error);
      }
    };

    fetchData();
  }, []);

  /* const expenseSummary = calculateExpenses(transactions) ?? null; */

  return (
    <div>
      {summary.map((expense, idx) => {
        const formattedString =
          expense[0].slice(0, 1).toUpperCase() + expense[0].slice(1);
        return (
          <Summary
            key={idx}
            title={formattedString}
            value={expense[1]}
            desc={"Total " + formattedString}
          />
        );
      })}
    </div>
  );
}

Answer 1

export default function SummaryContainer() {
 /* const { transactions, setTransactions } = useTransactionContext(); */
 let apiData = null;
 const [summary, setSummary] = useState([]);
 const url = "http://localhost:3000/getExpenseSummary";

const fetchData = async () => {
   try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        console.log("Fetched Data");
        setSummary(data);
    } catch (error) {
        console.log("error", error);
    }
};

useEffect(() => {
    fetchData();
}, []);

/* const expenseSummary = calculateExpenses(transactions) ?? null; */

return (
    <div>
        {summary.map((expense, idx) => {
            const formattedString =
                expense[0].slice(0, 1).toUpperCase() + expense[0].slice(1);
            return (
                <Summary
                    key={idx}
                    title={formattedString}
                    value={expense[1]}
                    desc={"Total " + formattedString}
                />
            );
         })}
     </div>
  );
}

你可以执行上面我修改过的代码吗？

Answer 2

您的代码是正确的。格式化字符串中使用的

expense[0]

可能存在问题。由于我们没有后端的响应，因此我无法判断费用字段是否是数组。在这里，我添加了我的更改，条件是费用字段可能是键值对。

您还可以使用 css 属性来设置值资本

capitalize

。

代码沙盒

文本转换 - 大写

请注意，我已将前 3 个字母大写，因为回复中的第一个字母已经大写。

import { useState, useEffect } from "react";

export default function App() {
  const [summary, setSummary] = useState([]);
  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/users";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        console.log("Fetched Data");
        setSummary(data);
      } catch (error) {
        console.log("error", error);
      }
    };

    fetchData();
  }, []);

  /* const expenseSummary = calculateExpenses(transactions) ?? null; */

  return (
    <div>
      {summary.length > 0 ? (
        summary.map((expense, idx) => {
          const formattedString =
            expense.name.slice(0, 3).toUpperCase() + expense.name.slice(1);
          return (
            <>
              <b>{formattedString}</b> <br />{" "}
            </>
          );
        })
      ) : (
        <p>Fetching data...</p>
      )}
    </div>
  );
}