Quiero establecer varios estados y llamar a la función useEffect a la vez. Aquí hay un código para una mejor comprensión.
const [activePage, setActivePage] = useState(1); const [skip, setSkip] = useState(0); const [limit, setLimit] = useState(10); const getUserList = ()=>{ // do something } useEffect(() => { getUserList(); }, [activePage, skip, limit]);Aquí puedes ver que tengo tres dependencias. establecer todas las dependencias llama a getUserList() tres veces. las tres dependencias son independientes. Quiero llamar a getUserList() solo una vez cuando necesito cambiar los tres estados, similar a this.setState() en componentes de clase como:
this.setState({ activePage: //new value, skip: // new value, limit: // new value },()=>getUserList())¿Puede alguien decirme si hay algún método para lograr esto?
Esta podría no ser la mejor solución, pero creo que debería funcionar. Me imagino que cuando el estado cambia tres veces a la vez, es un caso especial, por lo que podría crear otro estado que almacenaría un booleano que se establecería en verdadero en caso de que suceda. Entonces, useEffect podría establecerse para ese booleano en lugar de los tres estados.
Caso especial en el que se actualizan los 3 estados:
setActivePage() setSkip() setLimit() setAllChanged(true) ... useEffect(() => { getUserList(); }, [allChanged])Para su ejemplo, tal vez immer.js lo resolverá mejor como pretendía.
import produce from 'immer' function FooComponent() { const [state, setState] = useState({ activePage: 1, skip: 0, limit: 10 }) const getUserList = () => {} // use immer to assign `payload` to `state` const changeState = (payload) => { setState(produce(draft => { Objest.keys(payload).forEach(key => { draft.key = payload.key }) })) } changeState({ activePage: 2 }) useEffect(() => { getUserList(); }, [state.activePage, state.skip, state.limit]); return (< />) }