Tengo una matriz predeterminada (genreOptions) que paso a useState en mi función ShuffleControls para inicializar. Tengo un botón que cambia un valor de matriz en la matriz almacenada en el estado. Pero al actualizar el estado, también provoca el cambio del mismo valor en la matriz original que no quiero.
Esto está deteniendo mi plan para usar también la matriz original para restablecer los valores de la matriz de estado desde un botón y posiblemente usarlo en otro lugar. He intentado hacer un clon de la matriz original y pasarlo.
const genreOptions = [ ["rock", true], ["pop", true], ["punk", true], ["acoustic", true], ["alternative", true], ["ambient", true], ["blues", true], ["classical", true], ["chill", true], ["comedy", true], ["country", true], ["dance", true], ["disco", true], ["electronic", true], ["folk", true], ["drum and bass", true], ["dub", true], ["funk", true], ["gospel", true], ["garage", true], ["hip hop", true], ["house", true], ["indie", true], ["jazz", true], ["metal", true], ["new age", true], ["opera", true], ["r&b", true], ["reggae", true], ["rock and roll", true], ["ska", true], ["soul", true], ["soundtracks", true], ["techno", true], ["world music", true], ]; var genreOptClone = [...genreOptions]; function ShuffleControls({ nextTrack, currentTrack, token: receivedToken }) { const [genres, setGenres] = useState(genreOptClone.sort()); const handleGenreClick = (g, i) => { // toggle bool for genre g[(i, 1)] = !g[(i, 1)]; setGenres([...genres]); }; return ( <div> {genres.map((g, i) => ( <button type="button" key={i} onClick={() => { handleGenreClick(g, i); console.log("genreOptions onClick: ", genreOptions); }} className={g[(i, 1)] ? "genres-btn" : "genres-btn btn-disabled"} > {g[(i, 0)]} </button> ))} </div> ); } export default ShuffleControls;Solo está creando una copia superficial de la matriz con [...genreOptions] , por lo que los cambios en los elementos de la matriz dan como resultado un cambio en la matriz original. Un ejemplo parecido:
const arr = [['foo', 'bar']]; const shallowClone = [...arr]; shallowClone[0].push('baz'); console.log(arr);Cambio
const [genres, setGenres] = useState(genreOptClone.sort());a
const [genres, setGenres] = useState(() => genreOptions.map(subarr => [...subarr]).sort() );y, debido a que se debe evitar la mutación en React, se debe corregir lo siguiente (y usar el operador de coma tampoco tiene ningún sentido)
const handleGenreClick = (g, i) => { // toggle bool for genre console.log(g); g[(i, 1)] = !g[(i, 1)]; setGenres([...genres]); };En su lugar, solo pase el índice y use:
const handleGenreClick = (i) => { setGenres( genres.map((g, j) => j !== i ? g : ( [g[0], !g[1]] )) ); };Personalmente, también recomendaría usar una estructura de datos que indique los valores, en lugar de usar índices de matriz menos intuitivos, por ejemplo, en lugar de
["rock", true]Es posible que usted tenga
{ name: 'rock', enabled: true }Será un poco más fácil e intuitivo trabajar con él.