我在选择菜单的情况下很难更新状态

Question

正如标题所暗示的那样，我正在使用SELECT菜单进行更新状态。我不确定问题是否来自我试图从多个来源进行更新的事实？

getSurvivorperks获取一系列对象。在页面上，选择了一个随机4以显示，并且这四个是在每个Handlesubmit上随机分组的。我希望能够使用SELECT菜单手动选择PERK1、2等的各个特权。截至目前，这只是导致PERK1设置为NULL。数据确实在选择菜单中适当显示。

export default function SurvivorRandomizer() {
  const [survivorPerk1, setSurvivorPerk1] = useState({});
  const [survivorPerk2, setSurvivorPerk2] = useState({});
  const [survivorPerk3, setSurvivorPerk3] = useState({});
  const [survivorPerk4, setSurvivorPerk4] = useState({});
  const [perkList, setPerkList] = useState([]);
  const [loading, setLoading] = useState(true);
  const { user } = useUser();

  useEffect(() => {
    const fetchData = async () => {
      const data = await getSurvivorPerks();
      let perks = randomPerks(data);
      setPerkList(data);
      setSurvivorPerk1(perks[0]);
      setSurvivorPerk2(perks[1]);
      setSurvivorPerk3(perks[2]);
      setSurvivorPerk4(perks[3]);
      setLoading(false);
    };
    fetchData();
  }, []);

  const handleSubmit = () => {
    let perks = randomPerks(perkList);
    setSurvivorPerk1(perks[0]);
    setSurvivorPerk2(perks[1]);
    setSurvivorPerk3(perks[2]);
    setSurvivorPerk4(perks[3]);
  };

 if (loading) return <h1>loading...</h1>;
  return (
    <>
      <div className="perk-row-1">
        <div className="perk-card">
          <PerkCard {...survivorPerk1} />
          <select value={perkList.perk} onChange={(e) => setSurvivorPerk1(e.target.value)}>
            <option>Select...</option>
            {perkList.map((perk) => (
              <option key={uuid()} value={perk}>
                {perk.name}
              </option>
            ))}
          </select>
        </div>

Answer 1

这里的问题（让我蒙上了失明）是该值不能是一个对象。

 const handlePerkSelect = async (perk, id) => {
    let setPerk = await getSurvivorPerkById(id);
    perk(setPerk);
  };

-------------
          <select onChange={(e) => handlePerkSelect(setSurvivorPerk1, e.target.value)}>
            <option>Select...</option>
            {perkList.map((perk) => (
              <option key={uuid()} value={perk.ID}>
                {perk.name}
              </option>
            ))}
          </select>

这是我的解决方案。肯定有一种更好的方法来做到这一点，不涉及提出更多的提取请求，我可能会进行重构，但是在偶然的机会上，这对某人有帮助，我想我会分享问题是什么。