Acabo de empezar a aprender React y JavaScript.
Mientras realizaba el tutorial, llegué a este código de ejemplo de un componente, que crea un botón de alternancia.
Esto es parte del código:
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ // prevState? isToggleOn: !prevState.isToggleOn })); }2 cosas que me están molestando aquí:
prevState ?var prevState = this.state; antes de llamarlo, y aún así, funciona.arg => { statement; } la sintaxis funciona aquí?Perdón por las preguntas de novato...
React proporciona prevState junto con props , los cuales son opcionales.
prevState a updater . La función de devolución de llamada aún toma dos argumentos; el state y las props en el momento en que se aplica el cambio. Los paréntesis permiten múltiples líneas en las que, si no usaste los paréntesis, te verías obligado a usar un return . Podría usar una sola línea, pero no necesita las llaves.
return , debe envolverlo entre paréntesis. Gracias @joedotnot por captar eso. Entonces () => {foo: true} generará un error porque parece una función y foo: true es una línea no válida. Para arreglar esto, debe verse como () => ({ foo: true })Uso esto. (Ejemplo)
const [modal, setModal] = useState(false); const [dataAction, setDataAction] = useState({name: '', description: ''}); const _handleChangeName = (data) => { if(data.name) setDataAction( prevState => ({ ...prevState, name : data.name })); if(data.description) setDataAction( prevState => ({ ...prevState, description : data.description })); };