React 跟蹤對象數組更改的最佳方式

Question

假設我有一個這樣的對象數組，它存儲在 state 中：

interface CheckItem {
  label: string;
  checked: boolean;
  disabled: boolean;
}

const [checkboxes, setCheckboxes] = useState<CheckItem[] | undefined>(undefined);


const checkboxArr: CheckItem[] = [
{label: 'item1', checked: true, disabled: false}, 
{label: 'item2', checked: false, disabled: false}
];

useEffect(() => {
  setCheckboxes(checkboxArr);
}, [])

//should remain disabled until changes are made
//should revert to disabled if changes are undone
<Button disabled={disabled}>Apply Changes</Button>

我還有一個按鈕，在更改原始元素之一之前，該按鈕應保持禁用狀態。

跟蹤對數組中每個元素的任何屬性所做的更改的最佳方法是什么？ 數組可以是任意長度，所以我想優化空間/時間。

Answer 1

根據你的問題我能理解的是你想知道是否有人點擊了復選框？

您可以簡單地跟蹤更改，方法是讓您已經創建的名為 checkBoxArr 的常量變量並將其與新數組（如 tempCheckBoxArr）進行比較。

所以說我們創建一個數組const [tempCheckBoxArr, setTempCheckBoxArr] = useState<string[]>([])

這是一個空數組，我們可以將項目的標簽存儲在該數組中。

現在假設您在復選框上有一個 onclick function。

所以，

checkboxArr.map((checkbox) => {
  return(
      <div>
        <input type="checkbox" checked={checkbox.checked} onClick={() => handleCheckBox(checkbox.label)}/>
      </div>
  )
})

而 function handleCheckBox 是：

const handleCheckBox = (label: string) => {
  if(!tempCheckBoxArr.includes(label)){
    tempCheckBoxArr.push(label)
    setTempCheckBoxArr(tempCheckBoxArr)
  }else{
    let tempArr = tempCheckBoxArr.filter((labelInclude) => labelInclude !== label)
    
    setTempCheckBoxArr(tempArr)
    
  }
}

根據我們創建的tempCheckBoxArr.length的長度，您可以跟蹤您的按鈕是否應該被禁用以及是否有更改。

謝謝，有問題歡迎留言。