javascript - 处理映射数组中的 React Child

Question

我在表格中有行，我有一个从数组呈现的按钮。 (为简洁起见，我将排除整行)

  onDeleteAttachment = async (event, file) => {
    try {
        await this.props.deleteAttachment(file.Url);
        //Success now remove the row from the table
        var qualification = this.state.currentQualification;
        qualification._Attachments = qualification._Attachments.filter(a=> a != file);
        this.setState({currentQualification: qualification});
    }
    catch(ex){
        //Failed, I need to turn off the loader on the button
    }
  }


  render{
   return myArray.map(button => <DeleteButton onClick={onDeleteAttachment}>click me</DeleteButton>)
  }

单击该按钮时，它会显示一个加载程序。 DeleteButton 呈现如下:

   onClick(event){
      this.setState({loading: ture}); //This makes button turn into loader
       this.props.onClick(event); //push onchange to parent
   }

   render(){
       return 
    <Button onClick={onClick}>{this.state.loading ? "Loading" : "click me" </button>
   }

我遇到的问题是，我无法告诉 child DeleteButton 关闭加载器吗？

Answer 1

移除 try-catch 并让 onDeleteAttachment 抛出错误(或在捕获并处理错误后重新抛出错误):

onDeleteAttachment = async (event, file) => {
    await this.props.deleteAttachment(file.Url);
    //Success now remove the row from the table
    var qualification = this.state.currentQualification;
    qualification._Attachments = qualification._Attachments.filter(a=> a != file);
    this.setState({currentQualification: qualification});
}

并将 try-catch 添加到 DeleteButton 的 onClick 方法中，以便它可以捕获未处理的异常并管理自己的状态。

 onClick(event){
     try {
         this.setState({loading: true}); //This makes button turn into loader
         this.props.onClick(event); //push onchange to parent
     }
     catch(ex) {
         this.setState({loading: false}); // Failed to delete, turn loader off
     }
 }