Question

我一直在试图弄清楚为什么我绘制 BPMN 图的函数渲染了两次图。我在 useEffect 中查看了使用 axios 的各种示例，但无法弄清楚为什么会发生这种情况。该 url 正在为查看器返回一个有效的 xml。

谁能给我一些指导？

这里是完整的功能

function RenderBPMN(pathDefinition) {
  const [diagram, setDiagram] = useState(""); 
  const container = document.getElementById("container");
  const msg = JSON.stringify(pathDefinition);
  const url = `http://localhost:9090/xml?path=${msg}`;
  
  useEffect(() => {
        const fetchData = async () => {
          axios
          .get(url)
          .then((resp) => {
            setDiagram(resp.data);
          })
          .catch ((error) => {
            console.log(error);
          });
      };
      fetchData();
  }, [url]);

  if (diagram.length > 0) {
    const viewer = new Viewer({
      container,
      keyboard: {
        bindTo: document
      }
    });
    viewer
      .importXML(diagram)
      .then(({ warnings }) => {
        if (warnings.length) {
          console.log("Warnings", warnings);
        }
        viewer.get('canvas').zoom('fit-viewport');
      })
      .catch((err) => {
        console.log("error", err.message);
      }); 
  }

  return (
      <div
        id="container"
        style={{
          border: "1px solid #010101",
          height: "50vh",
          width: "70vw",
          margin: "auto"
        }}
      ></div>
  );
}
      
export default RenderBPMN;

Answer 1

从 useEffect 数组中删除 url。使用空数组时，它只会在组件安装时调用一次。

useEffect( () => {
    // your code
}, [ /* empty */ ])

在 useEffect() 中使用 axios 的 React 应用程序渲染两次

1 个答案: