如何在 React 中强制重新渲染函数组件？

Question

当函数的变量之一发生变化时，我想重新渲染我的函数组件。重要的是这个变量不附带道具。我正在使用 Material UI 和 React 16.8 构建一个简单的注册表单。它带有我正在尝试使用的钩子 API。问题是当输入字段验证的结果发生变化时，我想重新渲染我的组件。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>);}在这里你可以找到这个组件的源代码：https : //github.com/przemek-nowicki/auth-react-and-redux/blob/master/src/componnents/Register.js

Answer 1

你可以用这个，

const [emailError, setEmailError] = useState(false);

 const [email, setEmail] = useState('');

 const validateEmail = (email) => {

    if(email) {

      setEmailError(false);

    } else {

      setEmailError(true); 

    }

 } 

Answer 2

您可能也应该将错误布尔值存储在状态中。

const [emailError, setEmailError] = useState(false);

const [email, setEmail] = useState('');

useEffect(() => {

  setEmailError(!email);

}, [email]);