没有从Usestate React获得新价值

Question

通过编码来学习反应，在这里我将“ react-zoom-pan-pinch”用于鼠标滚动轮，因此，当我使用鼠标滚动Zoomin且比例比“ 1.311”更大时，它应该使圆圈更小（“ 10” ），我在这里创建了我想要实现的演示。

您可以在值较大时从控制台检查圆圈，

但是在我的真实代码中，我正在使用我“ ViewGenerator”（React-D3-Graph）和CustomNode，我有SVG和圈子

 import { Graph } from "react-d3-graph";

   const [circleR, setCircleR] = useState("50");

 
 const zoomChange = (event: any) => {
    if (event.state.scale < 1.311) {
      setCircleR("50");
    }
    if (event.state.scale > 1.311) {
      setCircleR("10");
    }
    console.log("event state scale ", event.state.scale);
    console.log("event circleR ", circleR);
  };
 
  function CustomNode(props) {
    return (
      <div>
        <svg viewBox="-1 -1 2 2">
          <circle
            cx="0"
            cy="0"
            r={circleR}
            strokeWidth="0.1"
            stroke= "black"
            fill= "orange"
          />
        </svg>
      </div>
    );
  }
 
 const default_config = {
    d3_config: {
      nodeHighlightBehavior: false,
      staticGraphWithDragAndDrop: true,
      automaticRearrangeAfterDropNode: false,
      d3: { disableLinkForce: true },
      height: 512,
      // width: 576,
      minZoom: 1,
      maxZoom: 1,
      node: {
        color: "lightblue",
        size: 500,
        highlightStrokeColor: "blue",
        fontSize: 20,
        highlightFontSize: 22,
        labelProperty: (node: default_config) =>
          node.name ? node.name : node.id,
        viewGenerator: (node) => (
          <CustomNode node={node}  focusId={null} />
        ),
      }
  };

  const [config, setConfig] = useState(default_config);


  <Graph
  config={config.d3_config}
  />
  
  
  

问题是'r = {circler}'只是从状态中获取默认值，而当我放大或缩放时，它不会更新它。

在我的“ ZoomChange”功能中，我有两个控制台。LOGS，我可以检查它为我提供了正确的值和“ 10'和50”之间的更改（ZoomChange函数正常工作），那么我没有更新的原因是什么值为'r = {circler}'？ 像'r =“ 50”或r =“ 10”'写入值会起作用，但我希望根据setState更新值。

英语不是我的母语，所以可能是错误！