es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo pasar los parámetros a una función convertida desde un gancho personalizado?

22 May, 2023 Programación

Tengo un hook personalizado que disparará dos acciones en mi slice Redux “myTestSlice”, action1 y action2, y detrás de cada acción tengo una función reductora para obtener un nuevo estado.

const useSetMyObjects = (
actions,
{ object1Name, object1Id, object2Name, object2Id }, // aquí se produce el error “cannot read property of undefined” cuando llamo a la función convertida de este hook personalizado
) => {
const dispatch = useDispatch();

useEffect(() => {
    dispatch(actions.action1({ object1Name, object1Id }));
}, [object1Name, object1Id, actions, dispatch]);

useEffect(() => {
    dispatch(
        actions.action2({
            object2Name,
            object2Id
        }),
    );
}, [object2Name, object2Id, actions, dispatch]);

};

export default useSetMyObjects;

Tengo un componente de React y quiero usar este hook personalizado en un bucle de matriz y también en un controlador de eventos. Por lo tanto, tengo que convertir este hook personalizado en una función para usarlo; de lo contrario, obtengo el siguiente mensaje de advertencia:

React Hook “useSetMyObjects” cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

Pero no tengo idea de cómo convertir este hook personalizado en una función.

Así es como usaré la función convertida del hook personalizado:

Quiero usar la función setTwoObjects en un useEffect:

useEffect(() => {
myData.map((data) =>
useSetMyObjects(myTestSlice.actions, {//debería usar esa función convertida en lugar de useSetMyObjects aquí, pero no tengo idea de cómo
object1Name: data.object1Name,
object1Id: data.object1Id,
object2Name: data.object2Name,
object2Id: data.object2Id
}),
);
}
}, [myData, useSetMyObjects]);

Y también uso la función setTwoObjects en un controlador de eventos:

const handleSelect = (e, value) => {
const newData = value;

    useSetMyObjects(myTestSlice.actions, {//debería usar esa función convertida en lugar de useSetMyObjects aquí, pero no tengo idea de cómo
        object1Name: newData.object1Name,
        object1Id: newData.object1Id,
        object2Name: newData.object2Name,
        object2Id: newData.object2Id,
    });
}

};

¿Cómo puedo convertir el hook personalizado en una función para poder llamarlo en el callback o en un controlador de eventos?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puede convertir el gancho personalizado en una función extrayendo la lógica del gancho y colocándola en una función separada. La función debe tomar los mismos parámetros que el gancho y llamar a la función dispatch con la acción y la carga útil adecuadas.

    Por ejemplo, podría crear una función llamada setTwoObjects que tome los parámetros actions, object1Name, object1Id, object2Name y object2Id, y llame a la función dispatch con la acción y la carga útil adecuadas.

    La función se vería algo así:

    const setTwoObjects = (actions, {object1Name, object1Id, object2Name, object2Id}, dispatch) => {
    dispatch(actions.action1({object1Name, object1Id}));
    dispatch(actions.action2({object2Name, object2Id}));
};

    Luego puede usar esta función en sus funciones useEffect y handleSelect:

    useEffect(() => {
    myData.map((data) =>
        setTwoObjects(myTestSlice.actions, {
            object1Name: data.object1Name,
            object1Id: data.object1Id,
            object2Name: data.object2Name,
            object2Id: data.object2Id
        }, dispatch),
    );
}, [myData, dispatch]);

const handleSelect = (e, value) => {
    const newData = value;

    setTwoObjects(myTestSlice.actions, {
        object1Name: newData.object1Name,
        object1Id: newData.object1Id,
        object2Name: newData.object2Name,
        object2Id: newData.object2Id,
    }, dispatch);
};

Comments are closed.