我還在學習 React，我想這是我第一次遇到這樣的問題。
首先，我使用一個名為 D3.js 或 D3-force 的庫。我剛開始使用它，老實說我根本不掌握它。
我正在嘗試使用通過 axios 查詢接收到的資料在 svg 中“顯示”圓圈。
這是我的代碼，（非常簡單）：
import React, {useRef, useEffect, useState} from 'react'
import {select} from "d3"
import axios from 'axios';
// const dummyData = [15, 20, 25, 30]
export default function D3() {
const svgRef = useRef();
const [data, setData] = useState(null)
const getData = () => {
axios.get('/api/carto')
.then((response) => {
setData(response.data);
})
}
const monSVG = () => {
const svg = select(svgRef.current);
svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(data.nodes)
svg.append("circle")
.attr("r", 15)
.attr("fill", "red")
.attr("stroke", 1.5);
}
useEffect(() => {
getData();
if(data != null){
monSVG();
}
}, [])
return (
<div>
<p>D3 Exemple</p>
<svg ref={svgRef}>
</svg>
</div>
)
}和我的資料的 console.log ：
對不起圖片。
我現在將盡力解釋我的問題：
我確定 axios 呼叫有效，它可以很好地回傳資料。只是，在 useEffect 期間，我的 useState 資料為空（我必須設定一個條件 (if) 以防止我的頁面完全崩潰）。
我可以看到重繪 （在檔案修改期間，而不是 F5）更改了“資料”的狀態。重新渲染后，這次是填充的。
我想我對 useEffect 了解不夠，無法理解發生了什么。有一個解釋會很好。
別擔心，我已經查看了 React 的官方網站等等。
感謝您提供任何資訊/幫助！
uj5u.com熱心網友回復：
您可以將整個 monSvg() 方法移動到 useEffect 中，如下所示
import React, { useEffect, useRef } from "react";
import { select } from "d3";
import axios from "axios";
export default function App() {
const svgRef = useRef();
useEffect(() => {
const svg = select(svgRef.current);
const getData = () => {
axios.get("/api/carto").then((response) => {
const { data } = response;
svg.append("g").attr("class", "nodes").selectAll("g").data(data.nodes);
svg
.append("circle")
.attr("r", 15)
.attr("fill", "red")
.attr("stroke", 1.5);
});
};
getData();
}, []);
return (
<div>
<p>D3 Exemple</p>
<svg ref={svgRef}></svg>
</div>
);
}
uj5u.com熱心網友回復：
useEffect 鉤子基本上是一個在組件開始新生命周期后立即呼叫的函式（與 Angular 中的 ngOnInit 不同）。
在您的情況下，您的 useEffect 函式中有一個回呼函式和一個空陣列，這導致 useEffect 在組件初始化后僅被呼叫一次，更多資訊請參見此處：https ://reactjs.org/docs/hooks-effect.html #tip-optimizing-performance-by-skiping-effects
我不確定 useEffect 鉤子是否是用 axios 呼叫中的資料填充狀態的最佳方式，因為當 useEffect 觸發時，該呼叫的承諾可能尚未實作。請嘗試呼叫 useEffect 中的 axios 函式，并在其 Promise 完成后設定狀態：
axios.get('/api/carto')
.then((response) => {
setData(response.data);
monSVG();
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/329039.html
標籤：javascript 反应 d3.js 反应钩子