Reactjs 两次添加相同数字后得到NaN

我的代码有问题，当我尝试向输入中添加相同的数字（数量）时，我得到了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

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;

从“/components/output”导入结果；
来自“/部件/收入”的进口收入；
常量应用=（）=>{
const[sum，setSum]=useState（0）；
const onChangeHandlerOutput=（值）=>{
setSum（（prevState）=>prevState-值）；
console.log（值）；
};
const onChangeHandlerIncome=（值）=>{
setSum（（prevState）=>prevState+值）；
};
返回(
你有{sum}$！
);
};
导出默认应用程序

Income.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

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;

康斯特收入=（道具）=>{
const[input，setInput]=useState（0）；
常量setInputHandler=（e）=>{
e、 预防默认值（）；
设置输入（如目标值）；
道具。一旦改变手的收入（投入）；
};
返回(
收入
setInput（parseInt（e.target.value））}
>
);
};
出口违约收入；

我尝试过使用prevState，简单地给总和加上值，得到了相同的结果

还记录了console.logged值：添加两个类似的数字会记录此值：

**123（这是我输入的号码）

App.js:10未定义**

---

我感谢任何帮助

提交之前。您重新设置了输入值的状态，并且它将被设置为“未定义”（变量

e.target

这里是

，它没有值）。之后，应用程序将更新sum is

numer+undefined===NaN

。不需要重新设置状态输入，因为输入值总是在输入更改时更新。只是：

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

---

在提交之前。您重新设置了输入值的状态，并且它将被设置为“未定义”（变量

e.target

这里是

，它没有值）。之后，应用程序将更新sum is

numer+undefined===NaN

。不需要重新设置状态输入，因为输入值总是在输入更改时更新。只是：

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

type=“text”

可以替换为

type=“number”

此外，还需要一些具有保护的解析器来避免NaN。例如：

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

然后

及

type=“text”

可以替换为

type=“number”

此外，还需要一些具有保护的解析器来避免NaN。例如：

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

然后

及

---

您正在setInputHandler中再次重置输入状态（setInput），而该状态已在输入元素的onChange处理程序中设置。在setInputHandler中，您将其设置为字符串，而在InputOnChange中将其设置为数字。还可以将输入类型文本更改为数字。当输入元素的onChange处理程序中已设置输入状态（setInput）时，您将在setInputHandler中再次重置输入状态（setInput）。在setInputHandler中，您将其设置为字符串，而在InputOnChange中将其设置为数字。另外，请将输入文本改为数字。谢谢好心的先生，不知什么原因我没有注意到。谢谢好心的先生，不知什么原因我没有注意到。