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

【问题标题】：JvectorMap rerendering proper markers after setState reactjsJvectorMap在setState reactjs之后重新渲染正确的标记
【发布时间】：2022-01-14 16:14:23
【问题描述】：

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

在我的状态下，我有两组数据：data1 和 data2。在我的渲染方法中，我有一个按钮，一旦单击该按钮，它就会将this.state.data1 更改为与this.state.data2 具有相同的内容，因为地图将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，以确保它的值发生变化，但它没有反映在地图上。谁能帮我解决这个问题？

提前致谢！

【问题讨论】：

标签： reactjs jvectormap

【解决方案1】：

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

原来地图不是由 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

【讨论】：

你好@Seif Sgayer 谢谢你的回复，我一回到家就试试这个。您所做的唯一更改是添加 componentDidUpdate() 方法吗？
是的，确实没有。
@jim 似乎他们的 npm 版本与 github 略有不同。他们使用不同的主文件，他们使用 webpack。所以现在： * 将修改后的文件复制到相应的 node_modules 目录 * 在同一目录中，执行 npm i 然后 npm run build 这应该会生成一个新的构建文件并且应该使您的更改生效。这是一个仅使用构建文件的示例：codesandbox.io/s/kw90mx7647
非常感谢您是专家！您能否在答案中包含上述评论，以便我将其标记为正确并奖励您赏金积分
可能是由于环境变化。我不知道确切的原因，但是，我的拉取请求被接受并合并了。您现在不需要手动复制和粘贴代码。你应该只更新你的 react-jvectormap，甚至你原来的代码框现在应该可以工作了。

【解决方案2】：

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

首先创建一个布尔状态来显示/隐藏地图：

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

附加此状态以显示/隐藏地图html：

{ isShowMap && <VectorMap... }

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

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

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

【讨论】：