reactjs - 为什么我的 usestate 挂钩值在 onClick 事件之后没有更新而完全没有错误？

Question

codeSanbox 链接

但是，浏览器没有给出错误，但是如果金额为正，则每当我添加交易时，收入状态都不会更新。

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

我希望正交易金额应该进入收入容器，负交易金额进入费用容器，并且在交易删除按钮上，收入和费用状态都应该根据删除的交易进行更新的功能。

 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;

标签： reactjsreact-hooksuse-statemap-function

Answer 1

这将起作用。

 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("");
  };