Creé una variable reactiva para ordenar una matriz cuando una variable de estado ha cambiado. Funciona si declaro la función de sort directamente como devolución de llamada, pero no si paso una función ya declarada.
Así que este es el código que no funciona:
const sortSongs = (a, b) => { const [option, direction] = sortOption.split("-"); const itemA = a[option == "Song" ? "title" : "artist"].toLowerCase(); const itemB = b[option == "Song" ? "title" : "artist"].toLowerCase(); if (itemA < itemB) { return direction == "up" ? 1 : -1; } if (itemA > itemB) { return direction == "up" ? -1 : 1; } return 0; }; $: filteredSongs = lessons ?.sort(sortSongs) .filter(lesson => lesson.title?.toLowerCase().includes(value)) || [];Y este el que hace trabajo:
$: filteredSongs = lessons ?.sort((a, b) => { const [option, direction] = sortOption.split("-"); const itemA = a[option == "Song" ? "title" : "artist"].toLowerCase(); const itemB = b[option == "Song" ? "title" : "artist"].toLowerCase(); if (itemA < itemB) { return direction == "up" ? 1 : -1; } if (itemA > itemB) { return direction == "up" ? -1 : 1; } return 0; }) .filter(lesson => lesson.title?.toLowerCase().includes(value)) || [];Entonces, ¿no deberían estar funcionando ambos? ¿Por qué hace una diferencia donde declaro la función? Aquí hay un REPL para ver esto en acción. Las canciones rojas obtuvieron el código que no funciona, mientras que las verdes tienen el que funciona.
Usted espera que $: filteredSongs vuelva a evaluar cuando cambia sortOption , pero cuando pasa la referencia de función .sort(sortSongs) , sortOption está 'oculta' dentro de la función y ya no está directamente relacionada con la declaración reactiva. Se menciona en los documentos aquí en el segundo párrafo .
Solo los valores que aparecen directamente dentro del bloque $: se convertirán en dependencias de la declaración reactiva
Una solución rápida y sucia sería pasar sortOption como parámetro
?.sort(sortSongs, sortOption) .sort() solo espera la función de comparación como argumento, por lo que se ignorará sortOption , pero nuevamente es una dependencia porque dentro del bloque $: nuevamente
Esta sería una alternativa más clara sin llamar a .sort() con un argumento 'redundante'
let lessons = []; ... const sortSongs = (songs, sortOption) => { return songs.sort((a,b) => { const [option, direction] = sortOption.split("-"); const itemA = a[option == "Song" ? "title" : "artist"].toLowerCase(); const itemB = b[option == "Song" ? "title" : "artist"].toLowerCase(); if (itemA < itemB) { return direction == "up" ? 1 : -1; } if (itemA > itemB) { return direction == "up" ? -1 : 1; } return 0; }) }; $: filteredSongs = sortSongs(lessons, sortOption) .filter(lesson => lesson.title?.toLowerCase().includes(value));