maps-in-react-components.tsx

/**
 * 这一定有点用
 */
import { useEffect, useRef, useState } from "react";

export default function Header() {
  const attrs = useRef(
    new Map(
      Object.entries({
        k_c: "89e39910e91",
        k_a: "89e39910e91",
      })
    )
  );
  const [selected, setSelected] = useState({});

  useEffect(() => {
    setSelected(Object.fromEntries(attrs.current));
  }, []);

  return (
    <div>
      <button
        onClick={() => {
          const string = Math.random().toString(16);
          attrs.current.set("k_" + string.substring(3, 2), string.substring(4));
          setSelected(Object.fromEntries(attrs.current));
        }}
      >
        Add random key pair
      </button>
      <pre>{JSON.stringify(selected, undefined, 2)}</pre>
    </div>
  );
}