我最初的目標要解決：我有 4 個組件并排排列。我希望能夠切換/單擊其中一個組件并使其他 3 個組件消失。然后重新切換同一組件以使其他組件重新出現。但也能夠通過切換任何其他組件來完成相同的任務。簡單來說，每個組件都是一個 div 標簽，其中包含一個圖像標簽。我對這個問題的初步看法：export const Test = () => {    const intialValue = [{id: 0, component: null}]    const array = [                    {id: 1, component: <CompOne/>},                     {id: 2, component: <CompTwo/>},                     {id: 3, component: <CompThree/>},                     {id: 4, component: <CompFour/>}                  ]        const [chosenNumber, setChosen] = useState(0)    const [statearray, setArray] = useState(array)    useEffect(() => {        console.log(chosenNumber)        const arr = array        if(chosenNumber === 0 ) setArray(array)        else setArray(arr.filter( num => num === chosenNumber))    }, [chosenNumber])    const handleClick = (number) => {        if(number === chosenNumber) setChosen(0)        else setChosen(number)    }        return (            <div className="flex" >                {statearray.map((comp, number) => <div key={number} className="h-12 w-12 bg-gray-400 m-1 flex items-center justify-center" onClick={() => handleClick(comp.id)}>{comp.id}</div>)}            </div>        );}我的思考過程是，當我單擊組件（div）時，我將設置選擇的編號，如果我單擊的div與選擇的相同，則將選擇重置為零。每次 selectedNumber 發生變化時，useEffect 都應該檢測到它并用 selectedNumber 過濾數組，如果 Choose 為零，則重置 stateArray?，F在，當我單擊其中一個組件時，它們都會消失。我只是不確定使用零是否適合用來比較每個對象或我需要使用什么。