React - event.persist()

Question

Witam,

mam problem, gdyż nie wiem jak użyć event.persist(), a jego użycie wynika z faktu błędu:

 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

Kod

<input value={this.state.newTodoData.name} onChange={(event) => this.setState(prevState =>({
                     newTodoData: {
                        ...prevState.newTodoData,
                        name: event.persist()
                     }}))} placeholder="Title" type="text" />
						<textarea value={this.state.newTodoData.description} onChange={(event) => this.setState(prevState =>({
                     newTodoData: {
                        ...prevState.newTodoData,
                        description: event.target.value
                     }}))} placeholder="Description" type="text" />

 

Answer 1

Nie potrzebnie sobie komplikujesz. ;) Problem wynika z faktu iż używasz setState jako funkcji. Dlatego też wewnątrz funkcji setState eventu jest już usunięty z pamięci. https://reactjs.org/docs/events.html Tu masz w drugim  akapicie ("Event Pooling") przykład jak odwołać się do czegoś z eventu w innej funkcji. (W przykładzie jest setTimeout) 

 

Możesz też zmienić wywołanie setState na taką postać ;) 

 

<input 
    value={this.state.newTodoData.name} 
    onChange={(event) => this.setState({
        name: event.target.value
    })} 
    placeholder="Title" type="text" 
/>
<textarea 
    value={this.state.newTodoData.description} 
    onChange={(event) => this.setState({
        description: event.target.value
    })} 
    placeholder="Description" 
    type="text"
/>

 

Wspomnę też ze w ramach wydajności warto deklaracje funkcji onChange przenieść do klasy. Obecnie za każdym razem kiedy React renderuje komponent tworzy dwie nowe funkcje w pamięci.