React删除对象属性后调用setState未触发useEffect执行问题

根因分析 #

删除ageRestriction属性时，你直接修改了原link状态对象，没有生成新的对象引用。React状态更新采用浅比较逻辑，当传入setLink的对象引用和旧状态完全一致时，React会判定状态未发生变更，不会触发重渲染，因此依赖link的第二个useEffect不会执行。
新增属性时你使用了{...link}展开语法生成了新对象，引用发生了变化，因此可以正常触发useEffect。
另外你代码中还存在两个隐藏问题：

• useEffect回调不能直接声明为async，async函数返回Promise，不符合useEffect回调只能返回清理函数或undefined的规则
• 原useEffect的依赖数组缺失link、storedAge，会存在闭包陷阱

修复代码 #

useEffect(() => {
    if(ageRestriction === false) {
        // 生成全新对象，不改动原有状态引用
        const newLink = {...link};
        delete newLink.ageRestriction;
        setLink(newLink);
    } else if(ageRestriction === true) {
        setLink({...link, ageRestriction: storedAge})
    }
}, [ageRestriction, link, storedAge])

如果要避免把link加入依赖数组，也可以用状态更新的函数式写法：

useEffect(() => {
    if(ageRestriction === false) {
        setLink(prev => {
            const newLink = {...prev};
            delete newLink.ageRestriction;
            return newLink;
        })
    } else if(ageRestriction === true) {
        setLink(prev => ({...prev, ageRestriction: storedAge}))
    }
}, [ageRestriction, storedAge])

内容的提问来源于stack exchange，提问作者Martin Olesen