reactjs - 有没有办法用从后端收到的数据更新表

Question

我正在使用material-ui向用户列出一组违规行为以选择一个或多个违规行为，然后在选择期间我从每个违规行为中提取它id，update the state因此i'll have an array of ids to send it to backend

这是我的代码

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import get from 'lodash/get';
// Material-UI
import MaterialTable, { MTableToolbar } from 'material-table';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import SaveIcon from '@material-ui/icons/Save';
import CancelIcon from '@material-ui/icons/Cancel';
// Forms
import Entity from '~/Components/Entity';
import { BaseFormComponent, Form, FormContainer, FormItem } from '~/Components/FormComponent';
import { LabelAndValue, LookupString } from '~/Components/FormComponent/Controls';
import { 
  isRequired,
  minNumbers,
  maxNumbers,
  onlyNumbers,
  noEnglish
} from '~/Services/Validators';
import Navigate from '~/Services/Navigate';
import Notifications from '~/Services/Notifications';
import Message from '~/Components/Message';
import Strings from '~/Services/Strings';

import styles from './styles';

@withStyles(styles)
class violationEditorScreen extends BaseFormComponent {
  constructor(props) {
    super(props);

    this.initState({
      error: false,
      errorMsg: '',
      requestId: null,
      complaintId: null,
      penalityTypeId: null,
      violations: [],
      inistitutionsData: [],
      selectedViolationsId: [],

      form: {
        id: {
          type: this.types.number,
          value: 0,
        },
        districtId: {
          type: this.types.number,
          value: 1,
          UIOnly: true
        },
        cityId: {
          type: this.types.number,
          value: 1,
          UIOnly: true
        },
        institutionTypeId: {
          type: this.types.number,
          value: 2,
          UIOnly: true
        },
        complaintTitle: {
          type: this.types.string,
          validators: [ isRequired(), noEnglish() ],
        },
        complaintDescription: {
          type: this.types.string,
          validators: [ isRequired(), noEnglish() ],
        },
        institutionId: {
          type: this.types.number,
          validators: [ isRequired() ],
        },
      }
    });
  }

  componentDidMount() {
    super.componentDidMount();

    // const id = get(this, 'props.match.params.id', null);

    // if (id) {   
    //   this.addFormFields({
    //   });
    // }

    this.getInstitutionsList();
  }

  getInstitutionsList() {
    const { form } = this.state;

    this.getInstitutionsEntity.get({
      cityId: form.cityId.value,
      districtId: form.districtId.value,
      institutionTypeId: form.institutionTypeId.value
    });
  }

  // On Institution Change
  onHandleInstitutionChange(institutionId) {
    this.getRequestIdEntity.post({ institutionId });
  }

  getRequestIdEntityPosted(data) {
    const requestId = data.requestId;
    const complaintId = data.id;

    this.setState({ 
      requestId,
      complaintId
    }, () => {
      this.getViolationsEntity.get({
        complaintId
      });
    });
  }

  onViolationsEntityReceived(data) {
    const violations = [];

    if(data && data.length > 0) {
      data.map(item => {
        violations.push({ ...item });
      });

      this.setState({ violations });
    }
    this.setState({ violations });
  }

  onInstitutionEntityReceived(data) {
    if(data && data.licensingInstitutionsModel && data.licensingInstitutionsModel.length > 0) {
      const arr = [];

      data.licensingInstitutionsModel.map(item => {
        arr.push({
          id: item.institutionId,
          nameAr: item.fullName
        });
      });
      this.setState({ inistitutionsData: arr });
    }
  }

  onEntityPosted(data) {
    const requestId = data.requestId;
    Notifications.notify('success', Strings.complaintHasBeenSuccessfullyPublished);
    this.getViolationsEntity.post({ requestId });
  }

  onSubmit() {
    const id = get(this, 'props.match.params.id', null);
    const { selectedViolationsId, requestId } = this.state;

    if (this.isFormValid) {

      if(selectedViolationsId.length === 0) {
        this.setState({ 
          error: true,
          errorMsg: Strings.addAtLeastOneViolation
        });
      }else {
        const payload = {
          ...this.formValues,
          selectedViolationsId,
          requestId,
          id: id ? id : 0 
        };

        this.entity.post(payload);
      }  
    } else {
      this.showFormErrors();
    }
  }

  handleSelectedRows(rows) {
    const selectedViolationsId = [];
    const penalityTypeIds = [];

    if(rows.length > 0) {
      rows.map(row => {
        selectedViolationsId.push(row.id);
        penalityTypeIds.push(row.penaltyTypeId);
      });

      this.setState({ selectedViolationsId }, () => {
        if(penalityTypeIds.length > 0) {
          const validators= [ 
            isRequired(),
            minNumbers(1),
            onlyNumbers()
          ];    
          const penalityTypeId = penalityTypeIds.sort((a, b) => {
            if(a > b) return -1;
            if(b > a) return 1;
          })[0];

          if(penalityTypeId === 1 || penalityTypeId === 2) {
            validators.push(maxNumbers(30));
          } else {
            validators.push(maxNumbers(60));
          }

          this.addFormFields({
            settlementPeriodInDays: {
              type: this.types.number,
              validators
            },
          });
          this.setState({ penalityTypeId });
        } else {
          this.setState({ penalityTypeId: null });
        }
      });

    } else {
      this.setState({
        selectedViolationsId: [],
        penalityTypeId: null
      });
    }

  }

  get localization() {
    return {
      header: {
        actions: Strings.listActionsLabel,
      },
      body: {
        emptyDataSourceMessage: Strings.listEmptyLabel,
      },
      pagination: {
        labelRowsPerPage: Strings.rowsPerPageLabel,
        labelDisplayedRows: `{from}-{to} ${Strings.fromText} {count}`,
      },
      toolbar: {
        nRowsSelected: `${Strings.nSelected} {0} ${Strings.selectedViolations}`
      }
    };
  }

  get options() {
    return {
      actionsColumnIndex: -1,
      pageSize: 10,
      selection: true,
      filtering: true,
      columnsButton: true,
      maxBodyHeight: 600,
      pageSizeOptions: [ 5, 10 ] ,
      doubleHorizontalScroll: true,
      rowStyle: row => {
        if ( row.tableData.id % 2 ) {
          return { backgroundColor: '#f2f2f2' };
        }
      }
    };
  }

  get columns() {
    return [
      { title: Strings.violationReferenceNumber, field: 'referenceNumber', cellStyle: { width: 120 } },
      { title: Strings.violationDescription, field: 'description' },
    ];
  }

  get components() {
    const { classes } = this.props;

    return {
      Toolbar: props => (
        <div className={classes.toolbar}>
          <MTableToolbar {...props} />
        </div>
      ),
    };
  }

  render() {
    const { form, error, errorMsg, inistitutionsData, violations, penalityTypeId } = this.state;
    const { classes } = this.props;
    const {
      TextField,
      LookupSelectField,
      SelectAutocompleteField,
    } = this;

    return (
      <React.Fragment>
        <Entity
          storeId={'Supervision-Complaints-Editor'}
          entityRef={ref => { this.entity = ref; }}
          onEntityReceived={data => this.onEntityReceived(data)}
          onEntityPosted={data => this.onEntityPosted(data)}
          onEntityPostedError={data => this.onEntityPostedError(data)}
          render={store => (
            <React.Fragment>
              <If condition={error}>
                <Grid item xs={12}>
                  <Message variant={'error'} text={errorMsg} />
                </Grid>
              </If>
              <Form loading={store.loading}>
                <Grid container spacing={24}>
                  <Grid item xs={9}>
                    <Paper elevation={1} className={classes.box1}>
                      <fieldset className={classes.fieldSet}>
                        <legend>{Strings.complaintDetails}</legend> 
                        <FormContainer>
                          <FormItem lg={4}>
                            <LookupSelectField 
                              name={'districtId'}
                              label={Strings.selectDistrictToSearch}
                              lookup={'Districts'}
                              onChange={() => this.getInstitutionsList()}
                              autocomplete
                            />
                          </FormItem>
                          <FormItem lg={4}>
                            <LookupSelectField 
                              name={'cityId'}
                              label={Strings.selectCityToSearch}
                              lookup={`City/LookupItemsByParentId/${form.districtId.value}`}
                              onChange={() => this.getInstitutionsList()}
                              autocomplete
                            />
                          </FormItem>

                          <FormItem lg={4}>
                            <LookupSelectField 
                              name={'institutionTypeId'}
                              label={Strings.selectInstitutionTypeToSearch}
                              lookup={'InstitutionTypes'}
                              onChange={() => this.getInstitutionsList()}
                            />
                          </FormItem>

                          <FormItem lg={4}>
                            <div className={classnames(classes.placeholder, {})}>
                              <SelectAutocompleteField
                                name={'institutionId'}
                                label={Strings.assignmentInstitutionName}
                                emptyString={Strings.searchByNameAndLicense}
                                data={inistitutionsData}
                                onChange={field => this.onHandleInstitutionChange(field.value)}
                              />
                            </div>
                          </FormItem>

                          <FormItem lg={4}>
                            <TextField 
                              name={'complaintTitle'}
                              label={Strings.complaintTitle}
                              setBorder={false}
                            />
                          </FormItem>

                          <If condition={penalityTypeId}>
                            <FormItem lg={4}>
                              <TextField 
                                name={'settlementPeriodInDays'}
                                label={Strings.insertSettlementPeriodInDays}
                                setBorder={false}
                              />
                            </FormItem>
                          </If>

                          <FormItem fullWidth>
                            <TextField
                              multiline
                              name={'complaintDescription'}
                              label={Strings.complaintDescription}
                            />
                          </FormItem>

                        </FormContainer>
                      </fieldset>
                    </Paper>

                    <Paper elevation={1} className={classes.box}>
                      <fieldset className={classes.fieldSet}>
                        <legend>{Strings.complaintAttachments}</legend> 
                        <FormContainer>

                        </FormContainer>
                      </fieldset>
                      {/* Attachment Here */}
                    </Paper>

                    <If condition={violations.length > 0}>
                      <Paper elevation={1} className={classes.box}>
                        <MaterialTable
                          title={Strings.complaintsAddViolationList}
                          data={violations}
                          options={this.options}
                          localization={this.localization}
                          columns={this.columns}
                          components={this.components}
                          onSelectionChange={rows => this.handleSelectedRows(rows)}
                        />
                      </Paper>
                    </If>
                  </Grid>
                  <Grid item xs={3}>
                    {/* =========== Sidebar ============= */}                  
                    <If condition={penalityTypeId}>
                      <Paper elevation={1} className={classes.box}>
                        <FormItem fullWidth style={{ marginBottom: 10 }}>
                          <LabelAndValue 
                            label={Strings.earnedPenality}
                            className={classes.deservedPenality}
                            value={(<LookupString 
                              lookup={'PenaltyType'}
                              value={penalityTypeId}
                            />)}
                          />
                        </FormItem>
                      </Paper>
                    </If>

                    <Paper elevation={1} className={classes.box}>
                      <FormItem fullWidth style={{ marginBottom: 10 }}>
                        <Button
                          fullWidth
                          size={'large'}
                          color={'primary'}
                          variant={'contained'}
                          className={classes.submitButton}
                          onClick={() => this.onSubmit()}
                        >
                          <SaveIcon className={classes.rightIcon} /> 
                          {Strings.saveText}
                        </Button>

                        <Button
                          fullWidth
                          size={'large'}
                          color={'secondary'}
                          variant={'contained'}
                          className={classes.cancelButton}
                          onClick={() => Navigate.goBack()}
                        >
                          <CancelIcon className={classes.rightIcon} /> 
                          {Strings.cancelText}
                        </Button>
                      </FormItem>
                    </Paper>
                  </Grid>
                </Grid>
              </Form>
            </React.Fragment>
          )}
        />
        {/* Get Institutions */}
        <Entity
          storeId={'Supervision-PlannedVisit-Schedule-List'}
          entityRef={ref => { this.getInstitutionsEntity = ref; }}
          onEntityReceived={data => this.onInstitutionEntityReceived(data)}
        />
        {/* Get Request Id */}
        <Entity
          storeId={'Supervision-Complaints-GetRequestId'}
          entityRef={ref => { this.getRequestIdEntity = ref; }}
          onEntityPosted={data => this.getRequestIdEntityPosted(data)}
        />
        {/* Get Violation By Request Id --- And Initiate Request in Admin Screens */}
        <Entity
          storeId={'Supervision-Complaints-Violations-By-ComplaintId'}
          entityRef={ref => { this.getViolationsEntity = ref; }}
          onEntityReceived={data => this.onViolationsEntityReceived(data)}
          onEntityPosted={data => Navigate.goBack()}
        />
      </React.Fragment>
    );
  }
}

violationEditorScreen.propTypes = {
  classes: PropTypes.object,
};

export default violationEditorScreen;

componentDidMount() {
if(id) {
// grap the data from back end and upadte the table with checked rows that matches the ids that i got from Back-End
 }
}

我希望receive array of Ids然后mark each row that it's id is in the array Of Ids让用户知道他之前选择了什么。

提前谢谢。

标签： reactjsmaterial-table

Answer 1

如果我理解你是正确的，你想改变行的样式，如果它被选中，那么你可以检查这个 url 并查看最后一个示例以修改它以适应你的情况吗？ https://material-table.com/#/docs/features/styling