Tengo esto:
const BillsOverviewScreen = props => { const { navigation } = props; const [availableBills, setAvailableBills] = useState([]); const bills = useSelector(state => state.bills.bills); useEffect (() => { setAvailableBills(bills); }, [bills]); const dispatch = useDispatch(); useEffect(() => { dispatch(billsActions.loadBills()); }, [dispatch]); React.useLayoutEffect(() => { navigation.setOptions({ headerRight: () => ( <View style={{flexDirection:'row'}}> <SortingMenu sortBills={sortBills} /> <FilterMenu /> </View> ), }); }, [navigation]); function sortBills(sortBy) { switch (sortBy) { case 'title': { setAvailableBills(availableBills.sort((a, b) => a.title < b.title ? -1 : (a.title > b.title ? 1 : 0))) break; }; case 'dateExpiry_up': { setAvailableBills(availableBills.sort((a,b) => new Date(b.dateExpiry) - new Date(a.dateExpiry))); break; }; case 'dateExpiry_down': { setAvailableBills(availableBills.sort((a,b) => new Date(a.dateExpiry) - new Date(b.dateExpiry))); break; }; case 'dateCreated_up': { setAvailableBills(availableBills.sort((a,b) => new Date(b.dateCreated) - new Date(a.dateCreated))); break; }; case 'dateCreated_down': { setAvailableBills(availableBills.sort((a,b) => new Date(a.dateCreated) - new Date(b.dateCreated))); break; }; default: return availableBills } }Inicialmente, la matriz de facturas disponibles de mi estado se llena según lo previsto con los datos correctos, pero tan pronto como uso mi función sortBills, la matriz está vacía. Lo extraño es que a veces, cuando juego con él, funciona. Pero cuando restablezco mi aplicación, vuelve a estar vacía. Realmente no sé qué estoy haciendo mal. probado cosas diferentes pero no puedo resolverlo.
sort hace una mutación en el lugar, por lo que está mutando el estado y en realidad nunca lo actualiza.
El método
sort()ordena los elementos de una matriz en su lugar y devuelve la matriz ordenada.
Copie superficialmente el estado primero, luego clasifíquelo, usando .slice crea fácilmente una copia en línea. Sugiero usar una actualización de estado funcional para esto. La actualización del estado funcional evita los gabinetes de estado obsoletos mediante la actualización del estado anterior frente al valor de las facturas availableBills cerradas en el ámbito de devolución de llamada.
setAvailableBills(availableBills => availableBills.slice().sort((a, b) => a.title < b.title ? -1 : (a.title > b.title ? 1 : 0) ));Aplique este patrón en todos sus casos.