Estoy intentando acelerar este campo de entrada. La razón es porque quiero guardar el valor de entrada en el estado redux y leí que no debe usar el estado redux con los controladores onChange porque redux no está diseñado para cambios de estado de alta frecuencia a diferencia del estado local. Intenté lo siguiente, pero debido a que es una entrada controlada donde el valor es igual al estado, el valor no se actualiza.
class Information extends Component { state = { myvalue:'' } changeHandler = (e) =>{ setTimeout(()=>{ this.setState({ myvalue:e.target.value }) },1000) } render() { return (<div> <textarea value={this.state.myvalue} onChange={this.changeHandler} /> </div>); } } export default Information;Probablemente no desee retrasar la configuración del estado local, ya que eso hará que la actualización del estado de redux ocurra con la misma frecuencia. Su problema con el código proporcionado es que el valor no se actualiza debido a setTimeout . Debe mantener la entrada actualizada en tiempo real.
En su lugar, actualice el valor del estado local en sincronía y actualice el valor redux con setTimeout .
Deberá configurar una variable para la identificación del tiempo de espera, de modo que pueda eliminarla antes de configurar otro tiempo de espera. Una vez que no se hayan realizado cambios durante el tiempo de espera, se resolverá el tiempo de espera y se podrá actualizar el estado de redux.
constructor() { // set a property to name your timeout this.reduxTimer = null } changeHandler = (e) => { // clear an existing timeout clearTimeout(this.reduxTimer) // set your component state this.setState({ myvalue: e.target.value }) // reset the timeout and assign its ID to the variable this.reduxTimer = setTimeout(() => { // set redux state }, 1000) }