Tengo un componente que almacena una serie de elementos en un estado de uso que luego se muestran. Esto me permite actualizar la lista y volver a renderizarla. Estoy tratando de crear funciones que pueda almacenar y enviar a otros componentes para permitirles ordenar mi lista y mostrar el resultado. Desafortunadamente, cuando creo y almaceno una función, solo usa el valor inicial de useState.

Por ejemplo, mira mi código a continuación:

 export default function MyWindow ({someAccessor}) { const [objectList, setObjectList] = useState([]) const sortObjects = () => { let newList = [...objectList] newList.sort(someSortFunction) setObjectList(newList) } const createAndSortObjects = () => { let newList = [1, 2, 3, etc.] newList.sort(someSortFunction) setObjectList(newList) } useEffect(() => { populateObjectListFunction() //Line 1 someAccessor.passFunction(sortObjects) //Line 2 someAccessor.passFunction(createAndSortObjects ) //Line 3 }, []) return ( <div> {objectList.mapTo(someComponentMap)} </div> ) }

En la línea 3, si el accesor llama a la función createAndSortObjects, puede crear una nueva matriz, ordenarla según sea necesario y luego actualizar mi variable objectList. Sin embargo, si trato de hacer lo mismo con la Línea 2, solo usa el valor inicial de objectList, que es [], y reemplaza la matriz poblada en la Línea 3.

¿Cómo puedo solucionar este problema de manera conveniente y hacer que la Línea 2 actualice el elemento existente? Creo que probablemente podría usar un useRef y acceder al valor .current en sortObjects, pero esto significaría que necesito dos variables separadas para realizar un seguimiento de un objeto. Tampoco puedo cambiar de mi useState porque entonces los componentes no se volverán a representar cuando cambie la lista. ¿Qué tengo que hacer?