React JS 切換所選項目

Question

我在我的組件中使用了反應鈎子 state。 用戶可以使用 select 的選項列表。 我需要跟蹤選擇了哪些選項 - 請參閱 state 中的“selectedArr”。

雖然這部分有效，但過濾 selectedArr 是錯誤的，如果我 select 首先是選項中的第二項，則不會過濾？ 我不明白為什么。

如何跟蹤選擇了哪些選項並切換單個選項？

這是我的代碼

const BarGraph = ({graphData, daysRange}) => {
const [optionsIndex, setOptionsIndex] = useState(0);
const [selectedArr, setSelectedArr] = useState([]);


const toggleActiveItem = (index) => {
    //Update the option index 
    setOptionsIndex(index);

    //Update selected options array
    setSelectedArr([...selectedArr, index]) 

    if(index === selectedArr[index]) {
        //Prevent from adding multiple of the same index
        setSelectedArr([...selectedArr])

        //if index is equal to the selected array index 
        //removed the matched index from selected array
        setSelectedArr(selectedArr.filter((i) => i !== index)); 
    }

}

Answer 1

const toggleActiveItem = (index) => {
    
    if(selectedArr.includes(index)){
      setSelectedArr(selectedArr.filter((i) => i !== index)) 
    } else {
     setSelectedArr([...selectedArr, index]) 
    }

    setOptionsIndex(index)
}