Получение NaN после двойного добавления одного и того же числа

#reactjs #react-hooks #state

#reactjs #реагирующие хуки #состояние

Вопрос:

У меня проблема с моим кодом, когда я пытаюсь добавить одно и то же число (сумму) к своим входным данным — я получаю 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

Income.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 и просто добавить значение к сумме и получил тот же результат.

Также консоль.зарегистрировал значение: добавление двух похожих чисел зарегистрировало меня так :

** 123 (это число, которое я ввел)

App.js: 10 не определено**

Я ценю любую помощь!

1. Вы снова сбрасываете состояние ввода (setInput) в setInputHandler, в то время как оно уже установлено в обработчике onChange элемента ввода. В setInputHandler вы задаете его как строку, в то время как при вводе Onchange оно задается как число. Также измените тип ввода text на number.

Ответ №1:

Перед отправкой. Вы снова установили состояние для входного значения, также оно будет установлено ‘undefined’ ( e.target здесь <form> переменная, которая не имеет значения). После этого приложение обновит sum is numer undefined === NaN . Нет необходимости повторно устанавливать ввод состояния, поскольку входное значение всегда будет обновляться при вводе onChange. Просто:

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

Ответ №2:

type="text" может быть заменено на type="number" Also, вам нужен какой-то анализатор с защитой, чтобы избежать 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);
};