React Native - UseState 返回初始值

Question

我的 React Native 状态存在以下问题： 使用状态“rectState”，我跟踪画布上显示的矩形的坐标。使用 PanGestureHandler 我将坐标设置为 nativeEvents 坐标。这工作正常。

 const [rectState, setRectState] = useState({ x: 50, y: 50, width: 300, height: 600});

...

  setRectState((state) => {
        return { ...state, height: newHeight, width: newWidth };
      });

此外，我在视图顶部显示状态。

return (
<PanGestureHandler onGestureEvent={handleGestures}>
  <View style={styles.ImageContainer} onLayout={onLayout} ref={imageContainerViewRef}>
    <Image style={{ flex: 1 }} source={sourceObject} resizeMode="contain"/>
     <View style={styles.OverlayView}>
      <Text>
        {rectState.x} - {rectState.y} - {rectState.height} - {rectState.width}
      </Text>
      <View style={{ flex: 1 }} onLayout={onLayout}>
        <Canvas ref={canvasRef} />
      </View>
    </View>
  </View>
</PanGestureHandler>

);

这也很好用，正确的值显示在我的视图中。

如果我在导航标题中的 ButtonClick 调用的函数中访问 rectState，rectState 会为我提供初始值，而不是在我的视图中正确显示的值。

   async function handleCropPicture  () {
const x = Number(rectState.x * canvasState.ratio * 5.256038647342995); // 92 = offset y
const y = rectState.y * canvasState.ratio * 5.367217280813215 + 92;
const width = rectState.width * canvasState.ratio * 5.256038647342995;
const height = rectState.height * canvasState.ratio * 5.367217280813215;

console.log(x, y, width, height);

const croppedImage = await ImageManipulator.manipulateAsync(
  sourceObject.uri,
  [
    {
      crop: {
        originX: x,
        originY: y,
        width: width,
        height: height,
      },
    },
  ],
  [{ compress: 1, format: ImageManipulator.SaveFormat.PNG, base64: true }]
);
console.log(croppedImage);
navigation.navigate("CroppedImageTest", { uri: croppedImage.uri }); };

我可以改变什么，在我的异步函数“handleCropPicture”rectState 中给我正确的设置值而不是初始值？