如何在React中强制重新渲染功能组件？

Question

I would like to re-render my function component when one of the function's variable is changed. Importantly this variable does not comes with props.

I am building a simple registration form with Material UI and React 16.8. It comes with the hooks API that I am trying to use. The thing is that I would like to re-render my component when result of the input field validation changed.

export default function Register(props) {
 let emailError = false;
 const [email, setEmail] = useState('');
 const validateEmail = (email) => {
    if(email) {
      emailError = false;
    } else {
      emailError = true; // How to force re-render if email is not valid? 
    }
 } 

 return (<div>
            <TextField
                  error={emailError}
                  variant="outlined"
                  required
                  fullWidth
                  id="email"
                  label="Email Address"
                  onKeyUp={(ev) => validateEmail(ev.target.value)}
                  onChange={(ev) => setEmail(ev.target.value)}
                  name="email"
                  autoComplete="email"
                  aria-describedby="email-error-text"
                />
   </div>);
}

Here you can find source code of this component: https://github.com/przemek-nowicki/auth-react-and-redux/blob/master/src/componnents/Register.js

Answer 1

You should probably store the error bool in the state as well.

 const [emailError, setEmailError] = useState(false); const [email, setEmail] = useState(''); useEffect(() => { setEmailError(!email); }, [email]); 

Answer 2

You can use this,

const [emailError, setEmailError] = useState(false);
 const [email, setEmail] = useState('');
 const validateEmail = (email) => {
    if(email) {
      setEmailError(false);
    } else {
      setEmailError(true); 
    }
 }