如何在 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);&nbsp;const [email, setEmail] = useState('');&nbsp;const validateEmail = (email) => {&nbsp; &nbsp; if(email) {&nbsp; &nbsp; &nbsp; setEmailError(false);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; setEmailError(true);&nbsp;&nbsp; &nbsp; }&nbsp;}&nbsp;

Answer 2

您可能也应该将错误布尔值存储在状态中。const [emailError, setEmailError] = useState(false);const [email, setEmail] = useState('');useEffect(() => {&nbsp; setEmailError(!email);}, [email]);