reactjs - JvectorMap 在 setState reactjs 之后重新渲染正确的标记

Question

我遇到的问题是，只要传递到 jvectormap 的数据发生变化， map 就不会反射(reflect)这些变化。

在我的状态中，我有两组数据:data1 和 data2。在我的渲染方法中，我有一个按钮，一旦点击它，它就会将 this.state.data1 更改为具有与 this.state.data2 相同的内容，因为 map 将 this.state.data1 作为 markers 的值。这是我的渲染函数:

  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 以确保它的值发生变化，但它没有反射(reflect)在 map 上。谁能帮我解决这个问题？

提前致谢!

Answer 1

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

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

我去 fork 了这个项目并修改了它的代码，以便它可以与上面给出的示例一起工作。

我会向他们的 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