react函数组件使用useEffect的设置依赖问题

问题来源

工作中经常会遇到这样的需求，组合几个条件查询，每次改变一个条件，都会触发查询。当点击清空按钮，清空所有的条件，然后在请求数据。

const [name, setName] = useState('')
const [id, setId] = useState('')
const [format, setFormat] = useState('')
//组合几个条件查询，每次改变一个条件，都会触发查询，
//但是当点击清空按钮时，会触发3次查询，并且没有达到我们想要的效果。
//难道就没有像class类那样的效果吗，this.setState({name:'',id:'',format},()=>{
//   getMaterialData()
//})
useEffect(()=>{
    getMaterialData()
},[name, id, format])

const clearQuery = ()=>{
    setName('')
    setId('')
    setFormat('')
}

解决办法

可以用一个变量作为依赖，每次需要查询的时候，将这个变量置为true

const [name, setName] = useState('')
const [id, setId] = useState('')
const [format, setFormat] = useState('')
const [flag, setFlag] = useState(false)

useEffect(()=>{
    if (flag) {
        getMaterialData()
        setFlag(false)
    }
},[flag])

//当name,id, format改变时，在改变变量的同时，后面在加上一个setFlag(true)，比如改变名称时
//setName('name')
//setFlag(true)

const clearQuery = ()=>{
    setName('')
    setId('')
    setFormat('')
    setFlag(true)
}