Значение переменной сбрасывается при отправке в форме реакции

Question

Эй, я пытаюсь получить какую-то проверку формы, но всякий раз, когда я отправляю форму, переменная nameContainer сбрасывается. Все условия в handleChange имеют значение true, поэтому проблем нет .. Как я могу это исправить?

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Form from './Components/Form/Form';
import Navbar from './Components/NavBar/Navbar';
import Jumbotron from './Components/Jumbotron/Jumbotron'

function App() {

  const [name, setName] = useState('');
  const [firstPass, setFirstpass] = useState('');
  const [secondPass, setSecondpass] = useState('');
  const [error, setError] = useState('');

  let nameContainer = '';

  const handleChange = e => {
    if (e.target.name === 'userName') {
      nameContainer = e.target.value;
      console.log(nameContainer); //shows in the console what I type
    } else if (e.target.name === 'userPass1') {
      setFirstpass(e.target.value);
    } else if (e.target.name === 'userPass2') {
      setSecondpass(e.target.value);
    }
  }

  const handleSubmit = (e) => {
    console.log(nameContainer) // shows blank
    if (nameContainer && firstPass && secondPass) {
      if (firstPass === secondPass) {
        setName(nameContainer);
      } else {
        setError('Make sure the passwords are the same.')
      }
    } else {
      setError('Make sure all the fields are filled in.')
    }
    e.preventDefault();
  }

  return (
    <div className="app">
      <Navbar name={name} />
      <div className="container">
        {!name && <Form handleSubmit={handleSubmit} handleChange={handleChange} error={error} />}
        {name && <Jumbotron name={name} />}
      </div>
    </div>
  );
}

export default App;

Answer 1

Полагаю, вам нужно сохранить переменную в состоянии. Я сделал воспроизведение на stackblitz , которое показывает вам пустую переменную test при втором щелчке. Вот код:

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  let test = '';

  const [state, setState] = React.useState('');

  const onBtnClick = () => {
    test = 'coucou';
    console.log('test = ', test);
    setState('mystate');
  }

  const onBtnClick2 = () => {
    console.log('test = ', test);
  }

  return (
    <div>
    <button onClick={onBtnClick}>Click 1</button>
    <button onClick={onBtnClick2}>Click 2</button>
    </div>
  );
};

render(<App />, document.getElementById("root"));

При обновлении одного из ваших состояний он «refre sh» вашего компонента и, таким образом, восстанавливает вашу переменную до ее начального значения, пробела, который вы уже видели в вашем случае.