使用 setState 强制组件重新渲染未按预期工作

Question

我正在使用 react-usa-map 包来可视化美国地图 (https://www.npmjs.com/package/react-usa-map)。我按照包的说明创建了我的地图组件，但是在选择状态时我面临重新渲染它的问题。这是我的整个组件代码：

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

我希望能够动态选择状态并为其着色。

Answer 1

您需要将键指定为状态代码，而不是文字“状态”。

const statesFilling = (state) => {
  console.log(state);
  return {
    [state]: { // <-- interpolate the state value to be used as key
      fill: "navy",
      clickHandler: () => console.log(state)
    }
  };
};