将相同的数字相加两次后得到 NaN答案

【问题标题】：Getting NaN after adding the same number twice将相同的数字相加两次后得到 NaN
【发布时间】：2021-01-03 15:27:56
【问题描述】：

我的代码有问题，当我尝试将相同的数字（数量）添加到我的输入时 - 我得到的是 NaN。只有当我添加两个相同的数字（例如 66 和 66）时才会发生这种情况 - 但当我添加不同的数字时它确实可以正常工作。

App.js：

import Outcome from "./components/Outcome";
import Income from "./components/Income";

const App = () => {
  const [sum, setSum] = useState(0);

  const onChangeHandlerOutcome = (value) => {
    setSum((prevState) => prevState - value);
    console.log(value);
  };

  const onChangeHandlerIncome = (value) => {
    setSum((prevState) => prevState + value);
  };

  return (
    <div>
      <Outcome onChangeHandlerOutcome={onChangeHandlerOutcome} />
      <Income onChangeHandlerIncome={onChangeHandlerIncome} />
      You have {sum}$!
    </div>
  );
};

export default App

收入.js：


const Income = (props) => {
  const [input, setInput] = useState(0);

  const setInputHandler = (e) => {
    e.preventDefault();
    setInput(e.target.value);
    props.onChangeHandlerIncome(input);
  };

  return (
    <div>
      <form onSubmit={setInputHandler}>
        <label>
          Income
          <input
            type="text"
            name="name"
            onChange={(e) => setInput(parseInt(e.target.value))}
          ></input>
        </label>
        <input type="submit" value="Submit"></input>
      </form>
    </div>
  );
};

export default Income;

我尝试过使用 prevState，并简单地将值添加到总和中并得到相同的结果。

还 console.logged 值：添加两个相似的数字记录了我：

**123（这是我输入的数字）

App.js:10 未定义**

感谢任何形式的帮助！

【问题讨论】：

您在 setInputHandler 中再次重置输入状态 (setInput)，而它已经在输入元素的 onChange 处理程序中设置。在 setInputHandler 中，您将其设置为字符串，而在输入 Onchange 中将其设置为数字。还将输入类型文本更改为数字。

标签： reactjs react-hooks state

【解决方案1】：

提交之前。您再次为输入值重新设置了状态，它也将设置为“未定义”（变量e.target 这里是<form>，它没有值）。之后，App 会更新 sum 为numer + undefined === NaN。无需重新设置状态输入，因为输入值将始终在 Input OnChange 上更新。只是：

const setInputHandler = (e) => {
    e.preventDefault();
    //setInput(e.target.value);
    props.onChangeHandlerIncome(input);
};

【讨论】：

谢谢你，先生，由于某种原因我没有注意到。

【解决方案2】：

type="text" 可以替换为 type="number" 此外，您需要一些带保护的解析器来避免 NaN。例如：

const parseAmount = (str) => str ? parseInt(str, 10) : 0;

然后

onChange={(e) => setInput(parseAmount(e.target.value))}

和

const setInputHandler = (e) => {
  e.preventDefault();
  const amount = parseAmount(e.target.value);
  setInput(amount);
  props.onChangeHandlerIncome(amount);
};

【讨论】：