为什么我的 usestate 挂钩值在 onClick 事件后没有更新，根本没有错误？

Question

然而，浏览器没有报错，但如果金额为正，每当我添加一笔交易时，收入状态不会更新。

收入状态保持所有添加的正数和费用状态所有添加的负数的总和。

我想要的功能是，正交易金额应进入收入容器，负交易金额应进入支出容器，并且在交易删除按钮上，收入和支出状态应根据删除的交易进行更新。

 AddTransaction.js

import React from "react";

const AddTransaction = ({
  item,
  amount,
  setItem,
  setAmount,
  transaction,
  setTransaction,
  income,
  setIncome,
  expense,
  setExpense
}) => {
  const onSubmit = (e) => {
    e.preventDefault();

    setTransaction([
      ...transaction,

      {
        text: item,
        amount: amount,
        id: Math.floor(Math.random() * 1000)
      }
    ]);
    setItem("");
    setAmount("");

    transaction.map((trans) =>
      Math.sign(trans.amount) === 1
        ? setIncome(trans.amount)
        : setExpense(trans.amount)
    );
  };
  console.log(transaction);

  return (
    <div className="addtransaction-container">
      <div className="add-trans-header">
        <h4>Add New Transaction</h4>
      </div>

      <form>
        <div className="form-control">
          <label htmlFor="text">Text</label>

          <input
            type="text"
            value={item}
            onChange={(e) => setItem(e.target.value)}
            placeholder="Enter text..."
          />
        </div>

        <div className="form-control">
          <label htmlFor="amount">
            Amount <br />
            (negative - expense, positive - income)
          </label>

          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="Enter amount..."
          />
        </div>

        <button type="button" onClick={onSubmit} value="submit" className="btn">
          Add transaction
        </button>
      </form>
    </div>
  );
};

export default AddTransaction;

Answer 1

你的提交函数应该是这样的：

const onSubmit = (e) => {
    e.preventDefault();

    const trans = {
      text: item,
        amount: amount,
        id: Math.floor(Math.random() * 1000)
    };

    setTransaction([
      ...transaction,
      trans
    ]);
    setItem("");
    setAmount("");

    Math.sign(trans.amount) === 1
        ? setIncome(trans.amount)
        : setExpense(trans.amount)
  };

想法是您不需要为所有现有交易调用 setIncome/setExpense，只需为新交易调用。

P.S。另一件需要改进的事情是像这样更新交易：

 setTransaction((prevTransactions) => [...prevTransactions, trans]);

在这种情况下，一切都会顺利进行。更多here

Answer 2

看起来这就是您在 onSubmit 中计算总数所需要的：

  const onSubmit = (e) => {
    e.preventDefault();

    const new_trx = [
      ...transaction,

      {
        text: item,
        amount: parseInt(amount),
        id: Math.floor(Math.random() * 1000)
      }
    ] 

    setTransaction(new_trx);
    setItem("");
    setAmount("");

      Math.sign(amount) === 1
        ? setIncome(prev => prev + parseInt(amount))
        : setExpense(prev => prev - parseInt(amount))

  };

沙盒：https://codesandbox.io/s/bitter-sun-98p8v

Answer 3

这会起作用。

 const onSubmit = (e) => {
    e.preventDefault();

    setTransaction((prev) => { 
      const newTransaction = [...prev, {
                  text: item,
                  amount: amount,
                  id: Math.floor(Math.random() * 1000)
     }] 

    newTransaction.map((trans) =>
        Math.sign(trans.amount) === 1
          ? setIncome((prev) => prev + Number(trans.amount))
          : setExpense((prev) => prev + Number(trans.amount))
      );
     return newTransaction;
    });

    setItem("");
    setAmount("");
  };

为什么我的 usestate 挂钩值在 onClick 事件后没有更新，根本没有错误？

Why my usestate hook value is not updating after onClick event with no error at all?

reactjs

map-function

react-hooks

use-state