从获取的 API / ReactJS 中计算总和

Question

我想计算总和。 Api 给出 'amount' 行，但我需要将它们加在一起，但仍无法找到正确的函数。我还在学习reactjs。

const url = "http://127.0.0.1:8000/api/expense";
const TableCardList = () => {
    const [data, setData] = useState([]);
    const getData = async () => {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
        console.timeLog(data);
    };
    useEffect (() => {
        getData();
    }, []);

    let tableList = data.map((row) => {
        return (
            <TableCard
            key={row.id}
            id={row.id}
            created_at={row.created_at}
            title={row.title}
            category={row.category}
            amount={row.amount}
            />
        );
    });

    return(
        <div className="row">
            <table class="table">
            {tableList}
            <td><b className="number"> {totalSum} Eur</b></td>
            </table>
        </div>
    );
};
export default TableCardList;

Answer 1

Array.prototype.reduce 可以做到这一点

const url = "http://127.0.0.1:8000/api/expense";
const TableCardList = () => {
  const [data, setData] = useState([]);
  const [totalSum, setTotalSum] = useState(0);

  useEffect(() => {
    const getData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      console.timeLog(data);
    };
    getData()
  }, []);

  useEffect(() => {
    const total = data.reduce((acc, row) => acc + row.amount, 0);
    setTotalSum(total)
  }, [data]);

  let tableList = data.map((row) => (
    <TableCard
      key={row.id}
      id={row.id}
      created_at={row.created_at}
      title={row.title}
      category={row.category}
      amount={row.amount}
    />
  ));

  return (
    <div className="row">
      <table class="table">
        {tableList}
        <td><b className="number"> {totalSum} Eur</b></td>
      </table>
    </div>
  );
};

export default TableCardList;

从获取的 API / ReactJS 中计算总和

Count total Sum from fetched API / ReactJS

javascript

reactjs