即使状态正在更新，React 也不会在 setState 上重新渲染组件

Question

这是我的代码。

import React, {Component} from 'react';
import Typist from 'react-typist';
import SvgComponent from './mapComponent';
import {stateData} from '../shared/exampleData'; 
class Home extends Component{
constructor(props){
    super(props);
    this.state={
        isHovered:false,
        active:"347",
        res_today:"29",
        new_today:"16",
        hoveredState:null
    }
}
changeOnHover = (stateCode) =>{
    console.log("HERE is whats inside ",stateCode,stateData[stateCode]);
    this.setState({
        hoveredState:stateData[stateCode],
        isHovered:true
    },()=>{
        console.log("mouse in",this.state)
    });
}
mouseOut = () =>{
    this.setState({
        isHovered:!this.state.isHovered
    },()=>console.log("After Mouse Out",this.state))
} 
render(){
    var isHovered = this.state.isHovered;
    return(
        <div className="container-fluid">
        <div className="row">
            <div className="col-12 col-md-7 large-screen-text">
                <Typist>
                <div className="top-text">
                    <br/>
                    <h1>781 Districts. 26 States. 1 Stop for all Complaints</h1>
                </div>
                <div className="mid-text">
                    <br/>
                    <h1 className="">Register Your Complaints</h1>
                </div>
                <div className="bottom-text">
                    <br/>
                    <span>
                        {isHovered ? 
                        <h1>Active: {this.state.hoveredState.active} 
                            <small>(+{this.state.hoveredState.new_today})</small> 
                        </h1> 
                        : 
                        <h1>Active: {this.state.active} 
                            <small>(+{this.state.new_today})</small>
                        </h1>}
                    <br />
                    <h1>Resolved Today: {this.state.res_today}</h1>
                    </span>
                </div>
                </Typist>
                <div class="pie-chart">    
                </div>
            </div>
            <div className="col-12 col-md-5">
                <div>
                    <SvgComponent changeOnHover={this.changeOnHover} mouseOut={this.mouseOut}/>
                </div>
            </div>
        </div>
    </div>
    )
  }
}

我正在使用 SVG 组件来更改悬停在 SVG 图形上时的状态信息。

这是 SVGComponent 的一部分：

function SvgComponent(props) {
 return (
  <svg
   xmlnsMapsvg="http://mapsvg.com"
   xmlnsDc="http://purl.org/dc/elements/1.1/"
   xmlnsCc="http://creativecommons.org/ns#"
   xmlnsRdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlnsSvg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="2 0 700 700"
   >
    <defs
     id="defs42" />
    <a onMouseOver={()=>props.changeOnHover("IN-AN")} onMouseLeave={()=>props.mouseOut()}>
     <path
      id="IN-AN"
      title="Andaman and Nicobar Islands"
      d="m 537.188,685.44148 -0.041,0.4695 0.768,0.30627 0.104,2.47542 1.258,1.84675 -0.71,-0.0232 
      0.661,0.93295 -0.574,0.18739 -0.437,0.94503 0.103,1.88201 -0.409,0.42617 -0.663,-0.49065,.. 
      ....,-0.62565 z" />
    </a>
    .
    .
    .
    </svg>);
  }

现在，根据上面提到的代码，当鼠标移动到使用 svg 中的路径标签开发的图形上时，它应该可以工作，主页中活动中显示的数字必须更新。但它并没有发生。我可以看到状态正在更新，但没有重新渲染。

以下是从 exampleData 导入的 stateData 包含的内容：

export const stateData ={
"IN-AN": {
    active:"10",
    new_today:"68",
    res_today:"17"
},
"IN-AP":{
    active:"14",
    new_today:"45",
    res_today:"78",
},
"IN-TN":{
    active:"19",
    new_today:"87",
    res_today:"76",
},
"IN-KA":{
    active:"69",
    new_today:"69",
    res_today:"69",
},
"IN-KL":{
    active:"12",
    new_today:"13",
    res_today:"14",
  }
}

编辑 1：由于我用于动画的 Typist 组件，它没有更新。我删除它后，它工作正常。