react中使用useEffcet抛出错误“超出最大更新深度”

【项目中部分代码】：

// 类组件中：一进页面就拿到要notiveType的值，于是写在componentDidMount 生命周期里，只在第一次进入页面时调一次，之后不调用

class A extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            value: '',
        }
    }

    componentDidMount () {
        this.inputDate();
    }

    inputDate= () => {
        this.setState({
            value: pubConent.notiveType,
        })
    }

}


---------------------------------------------------------------------------


// 把上面的改造成函数组件的写法：

const [value, setValue] = useState('')

React.useEffect(() => {
    inputDate()
})

const inputDate= () => {
    setValue(pubConent.notiveType);
}


// 然后报错了！！！！！

Warning: Maximum update depth exceeded. 
This can happen when a component calls setState inside useEffect, 
but useEffect either doesn't have a dependency array, 
or one of the dependencies changes on every render.

【说明】：

函数组件不能使用生命周期，Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）

import React, { useEffect } from 'react';

useEffcet(() => {

}, [])

第一个参数：是一个函数，必传项。是组件要执行的副作用。可以看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

第二个参数：不传或 传空 [ ]，非必传项。数组里面依赖改变时候副作用函数才会重新更新。

所谓依赖改变就是 [ 之前值 === 之后值 ] ，即更新前的值与更新后的值相等不执行useEffect，为渲染前后值不相等重新执行useEffect。

第二个参数类型

• 不传
• 空数组
• 由基本类型或者引用类型组成的数组

【抛出错误】：“超出最大更新深度”

【造成原因】：

        第二个参数导致的。因为useEffcet是上面三个生命周期结合的，当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时。

第一次渲染后执行一次useEffect，useEffect中回调函数里写了改变state值的处理，state值改变触发组件重新渲染。第二个参数不传，useEffect没有比较值，useEffect重新执行，useEffect中回调函数改变state值，state值改变触发组件重新渲染，无限循环

        注意：不传值是一种缺失依赖关系的情况，不建议这么做。

【解决】：

                传个空数组：

        第一次渲染后执行一次一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect中 [ ] 没有值，依赖没变，不触发useEffect，不执行回调函数, state 无更新，不触发组件重新渲染

（通俗说：只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行）

const [value, setValue] = useState('')

React.useEffect(() => {
    inputDate()
}， [])

const inputDate= () => {
    setValue(pubConent.notiveType);
}