Tengo una función asíncrona en un enlace personalizado que debería actualizar el estado pero no lo hace
export const useXYZ = () => { const [XYZ, setXYZ] = useState([]) const update = () => { BackendService.getAllXYZ().then( ({data}) => { //------------>>> here I want to update, but if I use the hook it doesnt update if I call update() setXYZ(data) } ).catch((error)=>{ }) } return [XYZ, update] }Aquí hay un ejemplo completo mínimo de un enlace personalizado con actualización de estado asincrónica y cómo se puede usar en su componente.
function App() { const [d1, roll1] = useDice(6) const [d2, roll2] = useDice(20) const [d3, roll3] = useDice(8) return <div> <button type="button" onClick={roll1} children={d1 || "roll"} /> <button type="button" onClick={roll2} children={d2 || "roll"} /> <button type="button" onClick={roll3} children={d3 || "roll"} /> <pre>{JSON.stringify([d1, d2, d3], null, 2)}</pre> </div> } function useDice(sides = 6) { const [value, setValue] = React.useState(null) return [ value, event => { setValue("...") setTimeout(_ => setValue(Math.floor(Math.random() * sides) + 1), 1000) } ] } ReactDOM.render(<App/>, document.querySelector("#app")) button { width: 3rem; line-height: 3rem; margin: 0 0.5rem; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="app"></div>Los ganchos personalizados pueden devolver cualquier número de valores de cualquier tipo. Considere esta abstracción alternativa que devuelve un valor y un componente sin necesidad de asignar controladores de eventos.
function App() { const [value1, d1] = useDice(6) const [value2, d2] = useDice(20) const [value3, d3] = useDice(8) return <div> {d1} {d2} {d3} <pre>{JSON.stringify([value1, value2, value3], null, 2)}</pre> </div> } function useDice(sides = 6) { const [value, setValue] = React.useState(null) function roll(event) { setValue("...") setTimeout(_ => setValue(Math.floor(Math.random() * sides) + 1), 1000) } return [ value, <button type="button" onClick={roll} children={value || "roll"} /> ] } ReactDOM.render(<App/>, document.querySelector("#app")) button { width: 3rem; line-height: 3rem; margin: 0 0.5rem; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="app"></div>