Javascript 重构react代码以提高性能

我是React的新手，我刚刚加入一个新的组织，需要在那里发送我的代码以供审阅。该功能运行良好，但在我看来，我的组件中的代码变得非常冗长，而且我的submithandler方法使我对数组进行了几次迭代，我不知道该怎么做。有没有办法缩短我的代码，使它看起来更好，并提高性能？目前，在我单击“提交”后显示数据需要很长时间，看起来迭代oof数组需要时间

此外，如果单击“提交”按钮后关闭浏览器，ajax挂起请求仍在进行中。我想在关闭浏览器或导航到其他页面后结束请求并停止加载。myRequestor是我所在组织的第三方库，可用于发送请求。请帮助我缩短代码并修复挂起的ajax请求问题。以下是我尝试执行的代码

const propTypes = {
  name: PropTypes.string,
  tenant: PropTypes.arrayOf(PropTypes.any),
  myRequestor: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  };


let myRequestor = null;

const CallerUtil = () => {
myRequestor = React.useContext(MyRequestorContext);
return <ApplicationLoadingOverlay isOpen backgroundStyle="clear" />;
}


class ReadinessComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        body: '',
        tenant: null,
        error: null,
        errorMsg: '', 
        isOpen: false,
        showTable: false,
        isInvalid: false,
        isLoading: false,
        tenantId: '',
        items: [],
        tenantItems : null
    };

    this.onChangeTenantDropDown = this.onChangeTenantDropDown.bind(this);
    this.onSubmitHandler = this.onSubmitHandler.bind(this);
    this.onChangeHandler = this.onChangeHandler.bind(this);
    this.tenantIdHandler = this.tenantIdHandler.bind(this);
    this.onClose = this.onClose.bind(this);
    this.addNewTenant = this.addNewTenant.bind(this);
    this.fetchInitial = this.fetchInitial.bind(this);
   }

componentDidMount() {
  this.mounted = true;
  this.setState({ isLoading: true });
  this.fetchInitial();

  }
componentWillUnmount(){
    
    this.mounted = false;

  }

onChangeTenantDropDown(value) {
    this.setState({
        tenant: value,
    });

  const info = this.state.tenantItems.find(function (t) { return t.name == value })
  this.setState({
    tenantId: info.id,
  });

}

  onSubmitHandler() {
    if (this.state.body == '') {
      this.setState({ isInvalid: true });
      return;
    }
    this.setState({ isLoading: true });
    const params = {
      "tenantId": this.state.tenantId,
      "tenantShortName": this.state.tenant,
      "contactName": this.state.body
    }

    const { request } = myRequestor.get({
      url: '/getReadinessCheck',
      params: params,
    });

   // request.then(async ({ data }) => {
      request.then(({ data }) => {
      console.log(this.mounted);
      if (!this.mounted) {
        this.setState({ isLoading: false });
        return;
      }
        
      console.log(data);
      
      let abc = data.find(vrsn => vrsn.name === 'TENANT_ERROR');         
      if (abc === undefined) {
        this.setState({ error: 'Failure', errorMsg:'Invalid Tenant',isLoading: false, isOpen: true, showTable: false, body: '', tenantId: ''});
        return;
      }
      let readinessResp = data.map(version => (version.latest === true ? { ...version, name: version.name.concat('_LATEST') } : version))
      readinessResp.sort(function (a, b) {
        var textA = a.name.toUpperCase();
        var textB = b.name.toUpperCase();
        return textA.localeCompare(textB);
      });

      this.setState({ items: readinessResp, error: 'Success', showTable: true, isLoading: false });
    }).catch(error => {
        this.setState({ error: 'Failure', errorMsg:'Failure', isLoading: false, isOpen: true, showTable: false ,body: '', tenantId: '' });
      });
    
  }


onChangeHandler(event) {
    this.setState({
        body: event.target.value,
    });
}

tenantIdHandler(event) {
  this.setState({
    tenantId: event.target.value,
  });
}

onClose() {
    this.setState(prevState => ({
        isOpen: !prevState.isOpen,
    }));
}


addNewTenant(shortName,tenantId){
  const newTenantShortName = shortName;
  const newTenantId = tenantId;
  const newTenant = {'name':newTenantShortName, 'id':newTenantId};
  this.setState({
    tenantItems: [...this.state.tenantItems, newTenant]
});     

}

fetchInitial() {
  this.setState({ isLoading: true });
  const { request } = myRequestor.get({
    url: '/tenants'
  });
   
  request
  .then(({ data }) => {
    if(data[0].hasOwnProperty("error")){
      this.setState({ error: 'Failure', errorMsg:data[0]['error'], isOpen: true, isLoading: 
   false,tenantItems: [{'name':'Default', 'id':'Default'}]});
      return;
    }

    let tenantsList = data;
    let tenants =[];
    tenantsList.map(tenant => ( tenants.push({'name':tenant.shortName, 'id':tenant.key})))

  this.setState({
    tenantItems: tenants,isLoading: false
  });
  })
  .catch((error) => {
    this.setState({ error: 'Failure', isOpen: true, isLoading: false});
  });
  }


  render() {
      const {
   error, isOpen, body,showTable
       } = this.state;

if (this.state.tenantItems === null) {
  return <CallerUtil />;
  }

if(this.state.isLoading){
    return <ApplicationLoadingOverlay isOpen backgroundStyle="clear" />;
}

if (showTable) {
    return (<div>
    <h1>Readiness Status</h1>
    <ReadinessComponentView readinessInfo={this.state.items} /></div>);
}

return (
  <div className="ruleSupportEvaluation">
    <Grid>
      <Grid.Row>
        <Grid.Column>
          <Heading level={1}>Readiness Check</Heading>
        </Grid.Column>
      </Grid.Row>
      <Grid.Row>
        <Grid.Column className="ruleSupportEvaluation" large={3} medium={3}>
          <div>
            <Heading className="info" level={3}>About</Heading>
            <Divider />
            <Text className="description" fontSize={18}>
              Readiness Check
            </Text>
          </div>
        </Grid.Column>
        <Grid.Column className="ruleSupportEvaluation" large={8} medium={8}>
          <div>
            <div className="readinessComponent">
            <Tenant
              tenant={this.state.tenantItems}
              change={this.onChangeTenantDropDown}
            />
            <ModalManagerExample addNewTenant={this.addNewTenant} />
            </div>
            <InputField type="text" label="Tenant-Id" value={this.state.tenantId} placeholder="Tenant Id" onChange={this.tenantIdHandler}/>
            <InputElement isInvalid ={this.state.isInvalid} change={this.onChangeHandler} value={body} />                
            <Submit click={this.onSubmitHandler} />
            
            {error === 'Failure' &&
              (
                <Notification
                  errorMessage={this.state.errorMsg}
                  close={this.onClose}
                  isOpen={isOpen}
                />
              )
             }
          </div>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </div>
);
     }
 }

ReadinessComponent.propTypes = propTypes;

export default ReadinessComponent;

const propTypes={
名称：PropTypes.string，
租户：PropTypes.arrayOf（PropTypes.any），
myRequestor:PropTypes.object，//eslint禁用行反应/禁止prop类型
};
让myRequestor=null；
const CallerUtil=（）=>{
myRequestor=React.useContext（MyRequestorContext）；
返回；
}
类ReadinesComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
正文：“”，
租户：空，
错误：null，
errorMsg:“”，
伊索彭：错，
可展示：假，
伊森瓦利德：错，
孤岛加载：false，
租户：''，
项目：[]，
租户：空
};
this.onchangetantdropdown=this.onchangetantdropdown.bind（this）；
this.onSubmitHandler=this.onSubmitHandler.bind（this）；
this.onChangeHandler=this.onChangeHandler.bind（this）；
this.tenantIdHandler=this.tenantIdHandler.bind（this）；
this.onClose=this.onClose.bind（this）；
this.addNewTenant=this.addNewTenant.bind（this）；
this.fetchInitial=this.fetchInitial.bind（this）；
}
componentDidMount（）{
这是真的；
this.setState（{isLoading:true}）；
this.fetchInitial（）；
}
组件将卸载（）{
这是错误的；
}
onChangeTenantDropDown（值）{
这是我的国家({
承租人：价值，
});
const info=this.state.tenantItems.find（函数（t）{return t.name==value}）
这是我的国家({
租户id:info.id，
});
}
onSubmitHandler（）{
if（this.state.body==''）{
this.setState（{isInvalid:true}）；
返回；
}
this.setState（{isLoading:true}）；
常量参数={
“tenantId”：this.state.tenantId，
“租户短名称”：this.state.tenant，
“contactName”：this.state.body
}
const{request}=myRequestor.get({
url:“/GetReadinesCheck”，
params:params，
});
//然后（异步（{data}）=>{
然后（{data}）=>{
console.log（此安装）；
如果（！this.mounted）{
this.setState（{isLoading:false}）；
返回；
}
控制台日志（数据）；
让abc=data.find（vrsn=>vrsn.name=='TENANT_ERROR'）；
如果（abc==未定义）{
this.setState（{error:'Failure'，errorMsg:'Invalid Tenant'，isload:false，isOpen:true，showTable:false，body:''，tenantId:''}）；
返回；
}
让readinessResp=data.map（version=>（version.latest==true？{…version，name:version.name.concat（“u latest”）}:version））
ReadinesResp.sort（函数（a，b）{
var textA=a.name.toUpperCase（）；
var textB=b.name.toUpperCase（）；
返回textA.localeCompare（textB）；
});
this.setState（{items:readinessResp，错误：'Success'，showTable:true，isload:false}）；
}).catch（错误=>{
this.setState（{error:'Failure'，errorMsg:'Failure'，isload:false，isOpen:true，showTable:false，body:''，tenantId:''}）；
});
}
onChangeHandler（事件）{
这是我的国家({
正文：event.target.value，
});
}
租户处理程序（事件）{
这是我的国家({
租户ID:event.target.value，
});
}
onClose（）{
this.setState（prevState=>({
isOpen:！prevState.isOpen，
}));
}
addNewTenant（简称tenantId）{
const newTenantShortName=shortName；
常数newTenantId=tenantId；
常量newTenant={'name'：newTenantShortName，'id'：newTenantId}；
这是我的国家({
租户：[…this.state.tenantItems，newTenant]
});     
}
fetchInitial（）{
this.setState（{isLoading:true}）；
const{request}=myRequestor.get({
url:“/租户”
});
 
要求
。然后（{data}）=>{
if（数据[0].hasOwnProperty（“错误”））{
this.setState（{error:'Failure'，errorMsg:data[0]['error']，isOpen:true，isLoading:
false，租户：[{'name'：'Default'，'id'：'Default'}]}）；
返回；
}
让租户列表=数据；
租客=[]；
tenantsList.map（tenant=>（tenants.push（{'name'：tenant.shortName，'id'：tenant.key}）））
这是我的国家({
租户：租户，isLoading:false
});
})
.catch（（错误）=>{
this.setState（{error:'Failure'，isOpen:true，isLoading:false}）；
});
}
render（）{
常数{
错误，等参线，主体，显示表
}=本州；
if（this.state.tenantItems===null）{
返回；
}
if（此.state.isLoading）{
返回；
}
如果（可显示）{
返回(
准备状态
);
}
返回(
准备就绪检查
关于
准备就绪检查
{错误==='失败'&&
(
)
}
);
}
}
ReadinesComponent.propTypes=propTypes；
导出默认值R