React useState 不更新 UI 中的数组状态。我是不是错过了什么？

Question

我正在单击按钮时在数组内创建虚拟对象。它生成

Date.now()

作为 id。我正在根据该 id 更新数组。它正在按照我想要的方式更新状态，它在控制台中吐出正确的数组，但为什么它在 UI 中没有正确显示。

const [prizePool, setPrizePool] = useState<object[]>([]);

我的数组函数是：

const addSinglePrizePool = () => {
    setPrizePool([
      ...prizePool,
      { id: Date.now(), rank: "", prize: "", currency: "" },
    ]);
    console.log();
  };

  const updatePrizePoolDataByid = (id: any, key: any, value: any) => {
    const updatedPrizePool = prizePool.map((prize: any) => {
      if (prize.id === id) {
        return { ...prize, [key]: value };
      }
      return prize;
    });
    console.log(updatedPrizePool);
    setPrizePool(updatedPrizePool);
  };

  const deletePrizeShemaById = (id: any) => {
    alert(id);
    const updatedPrizePool = _.remove(prizePool, (prize: any) => {
      return prize.id != id;
    });
    setPrizePool(updatedPrizePool);
  };

这是 tsx 代码：

{prizePool?.length > 0
                ? prizePool.map((prize: any, i: number) => (
                    <div
                      key={i}
                      className="flex justify-start items-center gap-2 border-l-4 pl-2 relative"
                    >
                      <p className="bg-primary w-5 h-5 rounded-full text-[13px] text-center absolute top-0 -left-3 text-white font-bold ">
                        {i + 1}
                      </p>
                      <div className="flex flex-col space-y-1.5 mt-4">
                        <Label htmlFor="position">Position</Label>
                        <Input
                          id="position"
                          onChange={(e) =>
                            updatePrizePoolDataByid(
                              prize.id,
                              "rank",
                              e.target.value
                            )
                          }
                          placeholder="1-5 or 1"
                          className="w-20 h-7"
                        />
                      </div>
                      <div className="flex flex-col space-y-1.5 mt-4">
                        <Label htmlFor="Prize">Amount</Label>
                        <Input
                          id="Prize"
                          placeholder="300"
                          onChange={(e) =>
                            updatePrizePoolDataByid(
                              prize.id,
                              "prize",
                              e.target.value
                            )
                          }
                          className="w-20 h-7"
                        />
                      </div>
                      <div className="grid w-40  gap-1.5 mt-3">
                        <Label htmlFor="map">Currency</Label>
                        <Select
                          onValueChange={(e) =>
                            updatePrizePoolDataByid(prize.id, "currency", e)
                          }
                        >
                          <SelectTrigger className="w-full h-7" id="map">
                            <SelectValue placeholder="Choose method" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectGroup>
                              <SelectItem value="cash">Cash</SelectItem>
                              <SelectItem value="soc">Sonic Coins</SelectItem>
                            </SelectGroup>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="flex justify-center items-center">
                        <TiDeleteOutline
                          className="w-7 h-7 mt-8 text-red-700"
                          onClick={() => deletePrizeShemaById(prize.id)}
                        />
                      </div>
                    </div>
                  ))
                : "No prize pool added yet"}

这是数组更新之前渲染的 UI：

这是我删除第二行之后的结果。

请有人帮助我。我很困惑发生了什么事。可能是我做错了什么，我不明白。感谢您的帮助 ❤️

Answer 1

我太垃圾了* puk 才意识到。我没有在输入中使用 value 属性。