javascript - My Balance States Throws 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) 工作吗？

标签： javascriptreactjs

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