Estoy tratando de llamar a dos funciones diferentes cuando el usuario hace clic en el ícono pero obtengo un error: se esperaba que el oyente de onClick fuera una función, en lugar de eso, obtuvo un valor de tipo de object . por favor, ¿alguien puede saber qué estoy haciendo mal aquí?
Aquí está mi código
function fullComponent (){ const dispatch = useDispatch(); const addItemToBasket = () => { dispatch( addToBasket({ id, name, price, }) ); }; const TodoComponent = { backgroundColor: "#44014C", } return ( <div> <StarBorderIcon onClick={addItemToBasket &&TodoComponent}<div /> ) }En primer lugar, TodoComponent no es una función que haga que onClick no tenga sentido.
Una cosa que puede hacer si desea invocar varias funciones con una llamada onClick es crear una función onClickHandler que agrupe sus llamadas de función, en términos generales.
const function1 = () => { ...do something } const function2 = () => { ...do something else } const onClickHandler = () => { function1() function2() } <div><StarBorderIcon onClick={onClickHandler}<div />Puede usar múltiples funciones pasando una función anónima en el evento onClick como se muestra a continuación
function fullComponent (){ const dispatch = useDispatch(); const addItemToBasket = () => { dispatch( addToBasket({ id, name, price, }) ); }; const TodoComponent = { backgroundColor: "#44014C", } return ( <div> <StarBorderIcon onClick={() => { addItemToBasket(); TodoComponent(); }} <div /> ) }Lo que debe comprender es que value1 && value2 terminará siendo value1 o value2 .
No tendrá los dos valores.
Entonces, si regresa a su problema original con addItemToBasket && TodoComponent , será solo TodoComponent .
Entonces, el compilador está fallando porque TodoComponent no es un controlador de eventos.
Si imaginamos que TodoComponent es una función, podemos arreglarlo de la siguiente manera.
const onClickHandler = () => { addItemToBasket(); TodoComponent() } <div><StarBorderIcon onClick={onClickHandler}<div />