Question

当函数的变量之一更改时，我想重新渲染函数组件。重要的是，此变量不是prop附带的。

我正在使用Material UI和React 16.8构建一个简单的注册表单。它随附了我尝试使用的hooks 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('');

useEffect(() => {
  setEmailError(!email);
}, [email]);

Answer 2

您可以使用此

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

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

2 个答案: