2

这是我在 React js 中的代码的一部分：

export default function Registration() {
    const [email, setEmail] = useState(null);
    const [password, setPassword] = useState(null);
    const [passwordRepeat, setPasswordRepeat] = useState(null);
    const [isFieldsOK, setFieldsOK] = useState(false);

    useEffect(() => {
        if (checkFieldsOK()) {
            setFieldsOK(true);
        } else {
            setFieldsOK(false);
        }
    }, [checkFieldsOK])

    const checkFieldsOK = () => {
        return (isEmail(email) && isValidPassword(password) && passwordRepeat === password);
    }
}

我有 isFieldsOK 状态，它告诉我我的字段是否有效，我希望它“监听”注册功能中的每一个变化。运行此程序后，我收到此警告：

The 'checkFieldsOK' function makes the dependencies of useEffect Hook (at line 34) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'checkFieldsOK' in its own useCallback() Hook  react-hooks/exhaustive-deps

我的代码到底有什么问题？我应该改变什么，为什么？谢谢！

4

2 回答 2

0

因为你没有包裹它checkFieldsOK，useCallback所以它没有被记忆，这意味着它会在每次渲染时重新创建。并且因为您的useEffecthascheckFieldsOK作为依赖项，所以该效果也将运行每个渲染。

正如错误消息所说，第一个（我认为不正确）选项是将函数声明移动到useEffect如下所示：

useEffect(() => {
    const checkFieldsOK = () => {
        return (isEmail(email) && isValidPassword(password) && passwordRepeat === password);
    }

    if (checkFieldsOK()) {
        setFieldsOK(true);
    } else {
        setFieldsOK(false);
    }
}, []);

但这意味着它只会在挂载时运行（因为依赖数组是空的），所以更好的方法是将checkFieldsOK函数包装在 a 中useCallback，这样它就不会在每次重新渲染时都重新制作，并且只有在字段值更改时才会运行效果：

const checkFieldsOK = useCallback(() => {
    return (isEmail(email) && isValidPassword(password) && passwordRepeat === password);
}, [email, password, passwordRepeat]);

在第二种useCallback方法中，它的行为如下：

  1. 字段值更改
  2. checkFieldsOK功能被重新制作
  3. useEffect运行并检查字段的验证，根据需要更新状态
于 2021-01-10T00:51:56.467 回答
0

首先，我会考虑将checkFieldsOK表达式移到useEffect.

然后问自己，什么时候checkFieldsOK被创建，被调用？

假设isEmail和isValidPassword是在组件外部声明的函数，要解决 linter 问题，您需要checkFieldsOK用 a包装useCallback：

const checkFieldsOK = useCallback(() => {
        return (
          isEmail(email) &&
          isValidPassword(password) &&
          passwordRepeat === password
        );
    }, [email, password, passwordRepeat])

这样，只要,或发生变化，checkFieldsOK就会更新它的输入。emailpasswordpasswordRepeat

或移动checkFieldsOK到 useEffect 并更新效果依赖项：

    useEffect(() => {

      const checkFieldsOK = () => {
        return (
          isEmail(email) && 
          isValidPassword(password) && 
          passwordRepeat === password
         );
    }
        if (checkFieldsOK()) {
            setFieldsOK(true);
        } else {
            setFieldsOK(false);
        }
    }, [email, password, passwordRepeat])

这样，只有当电子邮件、密码或密码重复状态更改时才会触发您的效果。

您可以进一步简化为：

    useEffect(() => {

      const fieldsOK = 
          isEmail(email) && 
          isValidPassword(password) && 
          passwordRepeat === password
        
       setFieldsOK(fieldsOK);

    }, [email, password, passwordRepeat])
于 2021-01-10T01:01:44.240 回答