如何根據已經采用的值過濾對象數組？

Question

我有一個對象數組，例如：

const FirstAidTypeSource = [
  { Name: "First Aid", Value: "First Aid" },
  { Name: "Senior First Aid", Value: "Senior First Aid" },
  { Name: "Anaphylaxis Certificate", Value: "Anaphylaxis Certificate" },
  { Name: "Asthma Certificate", Value: "Asthma Certificate" }
];

並且每次我使用其中一個時，我都希望將其從列表中刪除，例如，如果我創建第一個證書和 select “急救”，那么當我創建第二個證書時，我不想再次“急救”在列表中並且它不應該是可選的，即使我找到了另一種工作正常的方法，但是當我刪除一個證書時，一切都會搞砸，例如，如果我添加 3 個證書並選擇“急救”對於第一個，第二個是“高級急救”，依此類推，然后如果我想刪除第一個，即使我刪除了第一個是“急救”並且應該刪除但它仍然是在那里，“添加證書”按鈕也會消失。 詳情請參考demo

提前感謝任何幫助

Answer 1

這是因為如果index + 1 === formRef.current按鈕會呈現，但是當您刪除證書時不會更新formRef.current 。

因此，我所做的是將formRef從對 state 的引用更改為在確保它沒有在其他地方用作引用之后。 然后設置一個效果掛鈎，在每次firstAids更新時根據firstAids的長度更新formRef 。

  useEffect(()=>{
    setFormRef(firstAids.length)
  }, [firstAids])

通過將其設置為 state，組件將在更新后重新渲染，並正確渲染按鈕。

試試看：