JvectorMap 在 setState reactjs 之后呈现正确的标记

Question

我遇到的问题是，只要传入 jvectormap 的数据发生变化，地图就不会反映这些变化。

在我的状态里面，我有两组数据：data1和data2。在我的渲染方法中，我有一个按钮，一旦单击它，它就会将 this.state.data1 更改为与 this.state.data2 具有相同的内容，因为地图将 this.state.data1 作为 [= 的值16=]。这是我的渲染函数：

  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>
    );
  }
}

整个代码很简单，可以在这里找到：https://codesandbox.io/s/2vx2k1vl9n。如您所见，在按钮的 onClick 方法中，我在设置状态后打印 data1 以确保它的值发生变化，但它没有反映在地图上。谁能帮我解决这个问题？

提前致谢！

Answer 1

问题基本上不在你的代码中。我刚刚去了 react-jvectormap repo 并查看了代码，因为我怀疑有些东西拒绝重新渲染。

原来地图不是由 ReactJS 渲染的，而是由 jQuery 渲染的。

我分叉了该项目并更改了它的代码，以便它可以与上面给出的示例一起使用。

我会向他们的 repo 发出拉取请求，同时，您可以在这里尝试使用我的版本： 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

Answer 2

如果您不想处理分叉的东西，这里有一个解决方法。

首先为how/hide地图创建一个布尔状态：

const [isShowMap, setIsShowMap] = useState(true);

将此状态附加到 show/hide 地图 html:

{ isShowMap && <VectorMap... }

在 props 或任何数据发生任何变化时，只需使用 setTimeout 关闭并再次打开此标志：

useEffect(()=>{
  setIsShowMap(false);
  setTimeout(()=>{
    setIsShowMap(true);
  })
}, [prop1, prop2]);

由于这只是一种变通方法，您会遇到一点点闪烁。

JvectorMap 在 setState reactjs 之后呈现正确的标记

JvectorMap rerendering proper markers after setState reactjs

jvectormap

reactjs