我遇到的问题是，每当传递到jvectormap的数据发生更改时，地图都无法反映这些更改。
在我的状态内，我有两组数据：data1和data2。在我的渲染方法中，我有一个按钮，单击该按钮后，它将更改this.state.data1以具有与this.state.data2相同的内容，因为地图将this.state.data1用作{{1}的值}。这是我的渲染函数：
markers整个代码很简单，可以在这里找到：https://codesandbox.io/s/2vx2k1vl9n。
如您所见，在按钮的onClick方法中，我在设置状态后打印 render() {
return (
<div>
<a
href="#"
onClick={() =>
this.setState({ data1: this.state.data2 }, () =>
console.log(this.state.data1)
)
}
>
Click
</a>
<div style={{ width: 500, height: 300 }}>
<VectorMap
map={"world_mill"}
backgroundColor="#FFFFF"
markerStyle={{
initial: {
fill: "#FFFF",
stroke: "#383f47"
}
}}
series={{
markers: [
{
attribute: "r",
scale: [5, 20],
values: [60, 6, 54],
normalizeFunction: "polynomial"
}
]
}}
regionStyle={{
initial: {
fill: "#128da7"
},
hover: {
fill: "#A0D1DC"
}
}}
markers={this.state.data1}
ref="map"
containerStyle={{
width: "100%",
height: "100%"
}}
containerClassName="map"
/>
</div>
</div>
);
}
}
，以确保其值会更改，但不会在地图上反映出来。有人可以帮我吗？
谢谢！
答案 0 :(得分：2)
问题基本上不在您的代码中。 我只是去了 react-jvectormap repo并看了一下代码，因为我怀疑其中有些东西拒绝重新渲染。
结果显示地图不是由ReactJS渲染的，而是由jQuery渲染的。
我去了该项目并对其进行了修改，从而使其代码可以与上面给出的示例一起使用。
我将向其回购请求请求，同时，您可以在此处尝试使用我的版本： https://github.com/seifsg/react-jvectormap
这是我进行更改的文件，您可能只想将其复制并粘贴到node_modules文件夹中的正确位置： https://github.com/seifsg/react-jvectormap/blob/master/src/lib/components/VectorMap.js
因此要使其与您的代码一起使用：
将修改后的文件复制到相应的node_modules目录
在同一目录中，先执行npm i，然后执行npm run build，这将生成一个新的构建文件并使更改生效。
以下是仅使用构建文件的示例：codesandbox.io/s/kw90mx7647