Reactjs 在地图上查看城市名称

我正在尝试查看d3.js v5地图上的城市名称 我尝试了一些解决方案，这样我就可以“简单地查看城市名称”，而不需要工具提示，但我在React“你不能更新未安装的组件”中遇到了以下错误

在我当前的代码（在基于类的组件中）下面，我尝试使用钩子，但没有效果，所有这些概念对我来说都是新的

   // ... imports 

class MapPathHolder extends Component {
    constructor(props) {
        super(props);
        this.state = {
          algyData: null,
          toCity: "Algiers",
        };
    }

    navigateToCity = () => {
       this.props.history.push("/ToCityProducts");
    };
    
    componentWillMount() {
       d3.json("algy.json").then((algyData) => {
          this.setState({
            algyData,
          });
        });
    }

    componentDidUpdate() {
    const { width, height } = this.props;

    const dz = this.state.algyData;
    
    const svg = d3.select(this.refs.anchor);

    var projection = d3
      .geoEquirectangular()
      // .parallels([29.5, 45.5])
      .scale(1900.347057471)
      .center([3, 40]) 
      .translate([width / 1.4, height / 9]); 
    const path = d3.geoPath().projection(projection);
    const g = svg.append("g");

     g.append("g")
      .attr("fill", "#4b4b4b")
      .attr("cursor", "pointer")
      .selectAll("path")
      .data(
        topojson.feature(dz, dz.objects.collection).features
        )
      .join("path")
      .attr("stroke", "#A8846A")
      .attr("stroke-width", 1)
      .attr("d", path)
      .on("click", (d) => {
        this.props.postCity(d.properties.name);
        this.navigateToCity();
      })
      .on("mouseover", function (d) {
        d3.select(this).attr("fill", "orange");
      })
      .on("mouseout", function (d) {
        d3.select(this).attr("fill", "#4b4b4b");
      })
      .append("title")
      .text((d) => d.properties.name);

      g.append("path")
      .attr("fill", "none")
      .attr("stroke-linejoin", "round")
      .attr(
        "d",
        path(topojson.mesh(dz, dz.objects.collection, (a, b) => a !== b))
      );
     // error occurs  after adding this line 
     g.append("title").text((d) => d.properties.name);
    }

    render() {
        const { algyData, toCity } = this.state;

        if (!algyData) {
          return null;
        }

        return <g ref="anchor" />;
    }
 }

  // ... mapState/DispatchToProps()

 export default withRouter(
    connect(mapStateToProps, mapDispatchToProps)(MapPathHolder));

/。。。进口
类MapPathHolder扩展组件{
建造师（道具）{
超级（道具）；
此.state={
algyData:空，
托西蒂：“阿尔及尔”，
};
}
导航城市=（）=>{
this.props.history.push（“/ToCityProducts”）；
};
组件willmount（）{
d3.json（“algy.json”）。然后（（algyData）=>{
这是我的国家({
阿尔吉达特，
});
});
}
componentDidUpdate（）{
const{width，height}=this.props；
const dz=this.state.algyData；
const svg=d3.select（this.refs.anchor）；
var投影=d3
.GeoEquirectangle（）
//.平行线（[29.5,45.5]）
.比例尺（1900.347057471）
.center（[3,40]）
.翻译（[宽度/1.4，高度/9]）；
const path=d3.geoPath（）.projection（projection）；
常量g=svg.append（“g”）；
g、 附加（“g”）
.attr（“填充”，“#4b4b”）
.attr（“光标”、“指针”）
.selectAll（“路径”）
.数据(
feature（dz，dz.objects.collection）.features
)
.join（“路径”）
.attr（“笔划”，“#A8846A”）
.attr（“笔划宽度”，1）
.attr（“d”，路径）
.on（“点击”，（d）=>{
this.props.postCity（d.properties.name）；
这是一个城市；
})
.on（“鼠标悬停”，功能（d）{
d3.选择（此）.attr（“填充”、“橙色”）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（this）.attr（“填充”，“#4b4b”）；
})
.附加（“标题”）
.text（（d）=>d.properties.name）；
g、 附加（“路径”）
.attr（“填充”、“无”）
.attr（“笔划线条连接”、“圆形”）
艾特先生(
“d”，
路径（topojson.mesh（dz，dz.objects.collection，（a，b）=>a！==b））
);
//添加此行后出错
g、 追加（“标题”）.text（（d）=>d.properties.name）；
}
render（）{
const{algyData，toCity}=this.state；
如果（！algyData）{
返回null；
}
返回；
}
}
// ... mapState/DispatchToProps（）
使用路由器导出默认值(
连接（MapStateTrops、mapDispatchToProps）（MapPathHolder））；

您何时收到错误？您不需要使用

组件DidMount（）

而不是will mount吗？刚刚更新了代码，并更改为DidMount（）。我使用了一个旧示例。请尝试将您的代码转换为可运行的，它将帮助我们调试您何时收到错误？您不需要使用

组件DidMount（）吗

而不是will mount？只是更新了代码，并更改为DidMount（）。我使用了一个旧示例。请尝试将代码转换为可运行的，这将帮助我们进行调试