Reactjs useEffect检查对象的属性值是否发生了变化

问题描述

我有一个表单，每次表单中的任何输入发生更改时，都会触发上下文的更改。表单写入对象，然后将其传递到上下文。上下文对象看起来像这样

let form = {
    trialExperationDate: trialExperationDate,nextUserDate: nextUserDate,linkText: copyText,postalCode: formPostal,phone: formPhone,email: formEmail,pwRef: formPwRef
};

最初每个属性值为''。在我的组件中，我想观察对象通过上下文API的变化，并增加count变量，如果有任何字段!== ''

我的代码如下。

const [context] = useContext(FormContext);
let numChange = 0;

function isNotEmptyObject(o) {
    Object.keys(o).every(function(x) {
        if(o[x]!==''||o[x]!==null || o[x] !== undefined) {
            numChange += 1
        }
    });
}

useEffect(() => {
    isNotEmptyObject(context)
},[context]);

问题是，numchange始终保持为0。为什么？我确认上下文中的对象正在更新。

解决方法

当您从React.useEffect（）返回一个函数时，它将在卸载时调用该函数。如果您希望它在首次安装和上下文更改时触发，请删除返回值。