我的余额状态抛出balance.map不是函数错误？

Question

我正在制作一个简单的React应用程序，用于跟踪支出、收入和余额。我使用了一个名为Balance的状态钩子，它是所有输入状态的总和。问题是React抛出了Balance.map不是一个函数。所以，当用户输入所有的输入时，我无法显示总数会是多少。

下面是完整的代码。

export default function App() {
  const [Balance, setBalance] = useState([]);
  const [Income, setIncome] = useState(0);
  const [Expense, setExpense] = useState(0);

  const [Input, setInput] = useState([]);

  console.log(typeof Balance);

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  const handleClick = (e) => {
    e.preventDefault();
    if (Input > 0) {
      setIncome(Input);
    } else {
      setExpense(Input);
    }
    let val = parseInt(Input);
    setBalance(val, ...Balance);

    //console.log(...Balance);
    setInput("");
  };

  return (
    <div style={{ textAlign: "center", marginTop: "150px" }}>
      <form>
        <label htmlFor="input"> Please enter value: </label>
        <input
          name="input"
          type="number"
          value={Input}
          onChange={handleChange}
        />
        <button onClick={handleClick}> Submit</button>
      </form>
      <br />
      <h3> My Balance:</h3>
      <p>
        {Balance.map((i) => {
          return i;
        })}
      </p>
      <h3> My Income: {Income}</h3>
      <h3> My Expense: {Expense}</h3>
    </div>
  );
}

我知道Balance状态尽管被设置为一个数组，但它仍然是一个对象。我假设错误是来自那里？如果是这样，setBalance(...Input)应该能用吗？

Answer 1

正如用户在评论中所说的那样，问题在于你更新Balance值的方式。喏 我在这个地方做了一些改动。

let val = parseInt(Input, 10); // Here I add the base of parseInt

setBalance([...Balance, val]) Here I let the value as an array in the setBalance

完整的代码是：

import React, {useState} from "react";
import "./styles.css";

export default function App() {
  const [Balance, setBalance] = useState([]);
  const [Income, setIncome] = useState(0);
  const [Expense, setExpense] = useState(0);

  const [Input, setInput] = useState([]);

  console.log(typeof Balance);

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  const handleClick = (e) => {
    e.preventDefault();
    if (Input > 0) {
      setIncome(Input);
    } else {
      setExpense(Input);
    }
    let val = parseInt(Input, 10);
    setBalance([...Balance, val]);

    //console.log(...Balance);
    setInput("");
  };

  return (
    <div style={{ textAlign: "center", marginTop: "150px" }}>
      <form>
        <label htmlFor="input"> Please enter value: </label>
        <input
          name="input"
          type="number"
          value={Input}
          onChange={handleChange}
        />
        <button onClick={handleClick}> Submit</button>
      </form>
      <br />
      <h3> My Balance:</h3>
      <p>
        {Balance.map((i) => {
          return i;
        })}
      </p>
      <h3> My Income: {Income}</h3>
      <h3> My Expense: {Expense}</h3>
    </div>
  );
}