我正在使用react-usa-map包来可视化美国地图（https://www.npmjs.com/package/react-usa-map）。我建立了我的地图组件以每1件的指示，但我面临着重新渲染它选择状态时的问题。这是我的整个组件代码：
import React, { useState, useEffect } from "react";
import "./map.css";
import USAMap from "react-usa-map";
const PublicGraphMap = () => {
const [selected, setSelected] = useState();
const mapHandler = (event) => {
setSelected(event.target.dataset.name);
};
const statesFilling = (state) => {
console.log(state); // OUTPUTING THE CHOSEN STATE CORRECT
return {
state: {
fill: "navy",
clickHandler: () => console.log(state),
},
};
};
return <USAMap customize={statesFilling(selected)} onClick={mapHandler} />;
};
export default PublicGraphMap;
出于某种原因，一切都正常工作，并且在statesFilling（）函数中选择的功能正确显示在控制台中。但是我不知道为什么返回失败。返回对象中的所有内容均无法正常工作，如果我在此处输入例如NJ而不是state：
return {
NJ: {
fill: "navy",
clickHandler: () => console.log(state),
},
};
};
它正在为NJ状态着色，没有问题。这是沙箱示例：
https://codesandbox.io/s/pedantic-kowalevski-7rt7d?file=/src/App.js
我希望能够动态选择状态并为其着色。
您需要将密钥指定为状态代码，而不是文字“ state”。
const statesFilling = (state) => {
console.log(state);
return {
[state]: { // <-- interpolate the state value to be used as key
fill: "navy",
clickHandler: () => console.log(state)
}
};
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句