Creé un sitio web de redes sociales simulado donde los usuarios pueden comentar y "me gusta" en las publicaciones, por lo que quiero tener un botón con un pulgar hacia arriba que alternará entre "me gusta" y "no me gusta". El problema es que, cuando hago clic, el valor de estado (no me gusta) se une al valor de setState (me gusta) en lugar de reemplazarlo. ¿Dónde me estoy equivocando?
import React, { useState } from 'react'; import ThumbUpIcon from '@material-ui/icons/ThumbUp'; const ThumbUpButton = { backgroundColor: 'rgb(115, 250, 179)', border: 'none', borderRadius: '5px', } const ThumbStyle = { backgroundColor: 'red', border: 'none', padding: '5px', borderRadius: '5px', margin: '1rem' } const Liker = () => { const [thumb, setThumbUp] = useState(false); return ( <> <button style={{border: 'none', backgroundColor: 'transparent'}} onClick={() => setThumbUp(!thumb)}> <ThumbUpIcon style={ThumbStyle} /> {thumb && <ThumbUpIcon style={ThumbUpButton} />} </button> </> ); } export default Liker;Si entiendo su pregunta, está preguntando por qué los pulgares hacia arriba y hacia abajo a veces se muestran al mismo tiempo. Esto se debe a que usted representa incondicionalmente los pulgares hacia arriba y condicionalmente los pulgares hacia abajo.
Debes renderizar uno u otro. Dado que es el mismo componente y solo está intercambiando el estilo, aplique condicionalmente uno u otro estilo.
Además, es común utilizar una actualización de estado funcional al alternar un valor de estado booleano, ya que el siguiente estado depende necesariamente del estado anterior, es decir, thumb => !thumb . Esto evita recintos de estado obsoletos en las devoluciones de llamada.
<button style={{ border: 'none', backgroundColor: 'transparent' }} onClick={() => setThumbUp(thumb => !thumb)} > <ThumbUpIcon style={thumb ? ThumbStyle : ThumbUpButton} /> </button>En primer lugar, debe actualizar su estado a través de callbacksetThumbUp ((thumb) => !thumb) , en segundo lugar, tiene el problema en esta línea <ThumbUpIcon style={ThumbStyle} /> , este JSX obtiene el botón como presionado o no, por lo que Hay que ponerle una condición:
import React, { useState } from 'react'; import ThumbUpIcon from '@material-ui/icons/ThumbUp'; const ThumbUpButton = { backgroundColor: 'rgb(115, 250, 179)', border: 'none', borderRadius: '5px', }; const ThumbStyle = { backgroundColor: 'red', border: 'none', padding: '5px', borderRadius: '5px', margin: '1rem', }; const Liker = () => { const [thumb, setThumbUp] = useState(false); const style = thumb ? ThumbUpButton : ThumbStyle; return ( <> <button style={{ border: 'none', backgroundColor: 'transparent' }} onClick={() => setThumbUp((thumb) => !thumb)} > <ThumbUpIcon style={style} /> </button> </> ); }; export default Liker;cambiar esto podría funcionar usando el estado de conjunto funcional
onClick={() => configurarThumbUp(s=>!s)}