如何在每毫秒滴答一次的onTick事件中设置状态

我正在尝试在 onTick 事件中为时钟设置一个状态。

 <Viewer>
   <Clock
        startTime={start.clone()}
        stopTime={stop.clone()}
        currentTime={start.clone()}
        multiplier={50}
        onTick={_.throttle(handleValue, 1000)} // this thing ticks every millisecond
      />
    <Entity
          ref={ref} // here is the ref to get the value I want to set state with
          position={positionProperty}
          tracked
          selected
          model={{ uri: model, minimumPixelSize: 100, maximumScale: 100.0 }}
          availability={
            new TimeIntervalCollection([
              new TimeInterval({ start: start, stop: stop }),
            ])
          }
        />
 </Viewer>

这是 handleValue 函数。

  const handleValue = (clock) => {
//setting the state here ( I want to display the chaning the value over time) 
  setHeadingValue(ref.current.cesiumElement._properties._heading.getValue(clock.currentTime));
    }
  };

问题是它似乎试图一遍又一遍地重新渲染，从而冻结了应用程序。由于 setState 的性质，这种行为是有道理的。但我觉得有一个答案正在逃避我。我可以对我能做什么有所了解吗？我没有想法了。我正在使用 Resium（一个反应库），现在我正在设置值 using.getElementByID()并附加到 dom .. 这首先打败了使用 react ......

这是一个代码沙箱：https : //codesandbox.io/s/resium-cesium-context-forked-bpjuw? file =/ src/ ViewerComponent.js

有些元素没有显示，因为我们需要一个令牌，但这不会影响我正在寻找的功能。只需打开代码沙箱的控制台并转到 ViewerComponent.js

感谢您的帮助