I have made a React page. It initially gets data from my API, and stores it in state. The parent component makes a TextInput in a component for each row of data.
The TextInput value is from a prop. The onChange calls a method on the parent (through a prop given to the TextInput), which finds the appropriate index to update, updates it, then setState. It also sends a PUT to my API to update the data.
However it is pretty sluggish when typing. I can type fast and you can see it having a delay sometimes.
Any ideas?
update_sound(sound_transcript, sound_id) {
var index = this.state.board.sounds.findIndex(sound => {
return sound.id === sound_id;
});
this.state.board.sounds[index].sound_transcript = sound_transcript;
this.setState({
board: this.state.board
});
axios
.put("/api/v1/sounds/" + sound_id, {
sound_transcript: sound_transcript
})
.then(response => {
//Handle success
console.log("Update success");
})
.catch(error => {
//Handle error
console.log("Update error: " + error);
})
.then(() => {
//Always executed
});
}
<textarea
className="soundPlayer_text_input"
value={this.props.sound.sound_transcript}
onChange={this.soundOnChange}
/>;
soundOnChange(event) {
console.log("soundOnChange");
this.props.update_sound(event.target.value, this.props.sound.id);
}
Thanks
this.state.board.sounds[index].sound_transcript = sound_transcript;
copy
is a thing you should avoid in React/Redux/Anything_else_you_dont_want_mutation. For example, forget about direct assigning (never do this!), evenObject.assign
, or spread syntax or methods like.map
only do shallow copies. If you change a nested property in the copied object then you will mutate the original one. So, you need to combine all those methods. I can't say much aboutimmutability-helper
since I don't use it. But, if you learn the basics and best practices you won't need it.