使用useEffect方法做到useState回调效果

当使用hook的useState的时候,我们会需要更新完数据之后执行一个回调方法,但是useState没有回调,怎么办呢,通过useEffect来达到同样效果

问题环境:组件加载完成之后我要请求一个接口,拿到接口返回的数据之后再将它打印出来

初次想法

  const [data, setData] = useState({});
  // 组件加载时执行一次
  useEffect(() => {
    // 执行请求,拿到data
    setData(data);
  }, [])
  // 当data变化时执行
  useEffect(() => {
    console.log(data);
  }, [data])

结果:你会发现第二个useEffect执行了两次,第一次是拿不到数据的,第二次才能拿到数据
思考原因:只要是组件渲染就会执行一次useEffect,那一次的时候是没有设置data的
解决方案:设置一个布尔值来控制第一次不打印data

  const [data, setData] = useState({});
  const [boolValue, setBoolValue] = useState(false);
  // 组件加载时执行一次
  useEffect(() => {
    console.log('仅一次', data);
    // 模拟请求接口拿到data
    setData({name:'jack'})
  }, [])
  // 当data变化时执行
  useEffect(() => {
    setBoolValue(true);
    if(boolValue) {
      console.log(data);
    }
  }, [data])

完成,做到了效果