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

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 */ ])