Question

我已经创建了一个React页面。它最初从我的API获取数据，并将其存储在状态中。父组件在组件中为每行数据创建一个TextInput。

TextInput值来自一个属性。 onChange调用父对象上的方法（通过给TextInput的属性），该方法找到合适的索引进行更新，更新，然后再设置setState。它还会向我的API发送一个PUT以更新数据。

但是，键入时它很慢。我可以快速输入，有时会看到延迟。

有什么想法吗？

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);
}

谢谢

TextInput更新和状态修改缓慢

0 个答案: