Mi código es el siguiente:

 const [ fields, setFields ] = useState({ fruit: 'default', cheese: 'default', }) const handleChange = (newFields) => setFields({...fields, ...newFields}) let a = new Fruit('fruit', fields, handleChange, 'What kind of fruit do you like?') let b = new Cheese('cheese', fields, handleChange, 'What is your favorite cheese?') return ( <div> {a} {b} </div> ) ...

Las clases Fruta y Queso se definen de la siguiente manera:

 class Fruit { constructor(name, fields, onChange, prompt) { this.name = name this.fields = fields this.onChange = onChange this.prompt = prompt } render() { return ( <div> {this.prompt} <input name={this.name} value={this.fields[this.name]} onChange={(e)=>this.onChange({ [this.name]: e.target.value }) } /> </div> ) } }

El problema que tengo es que cuando se llama a la función this.onChange dentro de cada clase, usa el valor de los campos que se estableció en el constructor en lugar del valor actual de los campos. Por ejemplo, si ingreso 'manzana' para fruta y luego intento ingresar 'cheddar' para queso, los campos resultantes serán {fruta: 'predeterminado', queso: 'cheddar'}.

¿Hay alguna manera de garantizar que llamar a this.onChange llamará a la función fuera de la clase (handleChange) que a su vez usará la copia actual de los campos)?