我在使用选择菜单更新状态时遇到问题答案

【问题标题】：I'm having trouble updating state with a select menu我在使用选择菜单更新状态时遇到问题
【发布时间】：2022-06-16 04:31:04
【问题描述】：

正如标题所示，我在使用选择菜单更新状态时遇到问题。我不确定问题是否来自我尝试从多个来源更新它的事实？

getSurvivorPerks 获取一个对象数组。在页面加载时，随机选择 4 个来显示，并且这四个在每个句柄提交时都是随机的。我希望能够通过选择菜单手动选择 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>

【问题讨论】：

A) const [perkList, setPerkList] = useState([]); ---> 表示perkList 是一个数组。 B) `

标签： javascript arrays reactjs use-effect use-state

【解决方案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>

这是我的解决方案。肯定有一种更好的方法可以做到这一点，它不涉及发出更多的获取请求，我可能会重构，但如果这对某人有帮助，我想我会分享问题所在。

【讨论】：