Soy un principiante en cuanto a reaccionar. No sé por qué setState en la función handleclick no funciona correctamente. este es el codigo
class Toggle extends React.Component { constructor(props) { super(props); this.state = { isDark: false } } handleOnClick = () => { this.setState(prevState => ({ isDark: !prevState.isDark })) if (this.state.isDark === 'true') { setTheme('theme-dark') } else setTheme('theme-light') } render() { return ( <button onClick={this.handleOnClick}> </button>así que cuando hago clic en el botón, el estado de isDark siempre será falso, eso significa que setState no funciona, supongo
el problema es que el ciclo de vida de reacción actualizará el estado después de que se complete la función de sincronización handleOnClick. Puedes intentarlo de esta manera:
handleOnClick = () => { this.setState(prevState => { const isDark = !prevState.isDark; if (isDark === true) { setTheme('theme-dark'); } else setTheme('theme-light'); return {...prevState, isDark}; }) };o usando el método de ciclo de vida https://reactjs.org/docs/react-component.html#componentdidupdate
componentDidUpdate(){ if (this.state.isDark === true) { setTheme('theme-dark'); } else setTheme('theme-light'); }Tienes que escribir esto
this.handleOnClick = this.handleOnClick.bind(this); al final de su constructor y en la función handleOnClick , cree una variable local para guardar el nuevo valor:
handleOnClick = () => { const isDark = !this.state.isDark; this.setState({ isDark: isDark }); if (isDark === true) { setTheme('theme-dark') } else { setTheme('theme-light'); } }el código es correcto pero en la declaración condicional hay un gran error. Estaba comparando this.state.isDark ==='true'