react使用axios进行post多次请求，关闭多次请求保留最后一次。

需求：点击折线图获取横坐标的时间，根据时间与下面柱形图进行联动。柱形图接口需要时间入参。 问题：当点击次数过多时，柱形图第一次请求还没回来，第二次就开始请求了，第二次请求响应时间比第一次还短，导致第二次请求的数据先渲染，第一次后渲染，不能显示最新数据。 解决办法：使用axios关闭请求。

let cnacel = null 

const LineAndBar = () => {
   //点击折线图获取点击时间
  const [time,setTime] = useState('')
  return(
    <div>
    <LineBox setTime={setTime}/>
    <BarBox time={time}/>
    </div>
  )
}

const  LineBox = ({setTime})=>{
  //折线图数据
  const [data,setData] = useState({})
  //数据是否请求完成
  const [loading,setLoading] = useState(false)
  //使用自定义函数处理入参
  let params= useParams()
  //使用useEffect入参改变请求数据
  useEffect(()=>{
    //接口开始请求loading设置为正在加载
    setLoading(true)
    axios.post(`${url}/getLineChart`,params).then((res)=>{
      //保存数据,每个接口返回格式不一样，''里内容要根据情况定
      setData(_.get(res,'data.data.data',{}))
      //请求完成加载成功
      setLoading(false)
    })
  },[JSON.stringify(params)])

  return (
    // 使用andt的Spin加载组件
    <Spin spinning={loading}>
      <LineChart
        event={(e)=>{
          setTime(e)
        }}
        data={data}
      />
    </Spin>
  )
}

const BarBox = ({time})=>{
 //柱形图数据
  const [data,setData] = useState({})
  //数据是否请求完成
  const [loading,setLoading] = useState(false)
  //使用useEffect入参改变请求数据
  useEffect(()=>{
    //接口开始请求loading设置为正在加载
    setLoading(true)
    //判断上次请求是否完成，如果没完成停止上次请求。
    if(cnacel) {
      cnacel()
    }
    axios.post(`${url}/getBarChart`,time,{cancelToken:new axios.CancelToken(function(c){
      cnacel = c
    })}).then((res)=>{
      //保存数据,每个接口返回格式不一样，''里内容要根据情况定
      setData(_.get(res,'data.data.data',{}))
      //请求完成加载成功
      setLoading(false)
    })
    //请求结束将cancel变成null
    cnacel = null
  },[time])

  return (
    <div>
      <BarChart data={data}/>
    </div>
  )
}