Entonces, estoy tratando de agregar un máximo de 3 valores a una matriz useState y asegurarme de que todos sean únicos y si se empuja el cuarto elemento único, reemplazará el primer elemento en el índice 0. ? Además, si se hace clic en el mismo elemento, se elimina de la matriz. Sin embargo, la función que escribí no puede lograr mi objetivo.
const [chatbox,setChatBox]=useState([]); chat=['a11','b11','c11','d11'] chat.map((c)=>( <div onClick={()=>addorRemoveitems(c)} > {c} <div> )) const addorRemoveitems=(cId)=>{ if ( chatbox.length <= 3 && chatbox.includes(cId) ) { const newArray = chatbox.filter( (c) => c !== cId ); setChatBox(newArray); } else if ( chatbox.length < 3 && chatbox.indexOf(cId) === -1 ) { setChatBox((prev) => [...prev, cId]); } else if ( chatbox.length == 3 && chatbox.indexOf(cId) !== -1 ) { const newArray = chatbox.splice( 0, 1, cId ); setChatBox(newArray); } }Supongo que tendrá que modificar esto un poco para que se ajuste a la forma en que está agregando nuevos elementos a la lista. Aquí hay un ejemplo práctico: https://codesandbox.io/s/react-hooks-playground-forked-e32wlp?file=/src/index.tsx
const [array, setArray] = useState([]); const [newItemGen, setNewItemGen] = useState(0); const addOrRemoveItemFromArray = (item) => { if (array.includes(item)) { setArray((prevState) => prevState.filter((existing) => existing !== item) ); } else { setArray((prevState) => [item, ...prevState.slice(0, 2)]); setNewItemGen((prevState) => prevState + 1); } }; return ( <div style={{ display: "flex", flexDirection: "column" }}> <div> Items in array : {array.map((item) => ( <button onClick={() => addOrRemoveItemFromArray(item)}>{item}</button> ))} </div> <div> <button onClick={() => addOrRemoveItemFromArray(`newItem${newItemGen}`)} > add item </button> </div> </div> ); }Si el elemento ya está en la matriz, fíltrelo. De lo contrario, agregue el elemento a una porción de la matriz anterior que solo captura los dos primeros valores.
EDITAR: Me acabo de dar cuenta de que desea verificar que un valor sea único antes de agregarlo a la lista. Tendrá que crear una función para agregar y luego una función para eliminar.
const addItem = (item) => { if (!array.includes(item)) { setArray((prevState) => [item, ...prevState.slice(0, 2)]); setNewItemGen((prevState) => prevState + 1); } }; const removeItemFromArray = (item) => { setArray((prevState) => prevState.filter((existing) => existing !== item) ); };