¿Cómo pasar los parámetros a una función convertida desde un gancho personalizado?
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?
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ámetrosactions
,object1Name
,object1Id
,object2Name
yobject2Id
, y llame a la funcióndispatch
con la acción y la carga útil adecuadas.La función se vería algo así:
Luego puede usar esta función en sus funciones
useEffect
yhandleSelect
: