UseEffect 死循环问题记录

问题描述

问题代码如下：

export default props => {
    const {detail, option = {}} = props.data;
    const [info, setInfo] = useState({});
    
    useEffrct(() => {
        setInfo({...detail, ...option});
    }, [option])
    
}

当props.data 的值中没有 option 的时候，就死循环了， 报错如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olv7zpDB-1606299982412)(en-resource://database/544:1)]

原因

虽然后面发现这个问题是因为很蠢的代码造成的，但还是要记录一下！！！警示自己

1. 每次state更新，页面就会重新渲染。
2. 由于在 useEffect 中使用了setState，执行useEffect 就会重新渲染。
3. 获取detail 和 option 的值没有依赖，所以页面渲染就会重新取值。
4. 由于给option值赋了默认值，每次重新取值就会重新赋值一个空对象
5. 空对象 {} !== {}
6. useEffect 依赖于 option, option 更新就会重新执行useEffect中的代码
7. 所以每次页面重新渲染，option的值就会变化，导致 再次执行useEffect中的代码，然后再次重新渲染，进入死循环。

解决方案

option不设置默认值，在使用时进行为空判断