reactjs - ReactJs TypeError：映射时无法读取null的属性（读取'localeCompare'）

Question

所以这个问题出现在昨天，前一秒一切正常，在这个页面上根本没有工作，然后突然我得到一个错误。

这是我们的 IOperator

      class IOperator {
         public id: string = '';
         public operatorName: string = '';
         public groupEmail: string = '';
         public contacts: IContact[] = [];
         public regions: IRegion[] = [];
         public erpId: string = '';
         public groupEmails: IGroupEmail[] = [];
         public effectiveDate: string = '';
         public billingAddress: string = '';
         public billingCityStateZip: string = '';
          }

我们正在做的是像往常一样在页面顶部的 IOperator 中设置我们的运算符。

     Import { IContractor, IEngineer, IOperator, IRegion, 
     IWarehouse, IWell } from 
     '../../../../Interfaces/WellInterface';

    private contractors: IContractor[] = [];
    private engineers: IEngineer[] = [];
    private operators: IOperator[] = [];
    private warehouses: IWarehouse[] = [];
    private counties: any[] = [];
    private usStates: any[] = [];
    public newEngineer: IEngineer = new IEngineer();

    // disposers
    public wellDisposer: any;
    public warehouseDisposer: any;
    public operatorDisposer: any;
    public regionDisposer: any;
    public contractorDisposer: any;
    public engineersDisposer: any;
    public statesDisposer: any;
    public countiesDisposer: any;
    private targetFormationDisposer: any;

     public state = {
     addEngineerModal: false,
     contractorList: this.contractors,
     countyList: this.counties,
     dataSet: this.dataSet,
     engineerList: this.engineers,
     formIsValid: false,
     isDirty: false,
     newEngineer: this.newEngineer,
     newWell: false,
     novaEmailList: [],
     operatorList: this.operators,
     regionList: [] as IRegion[],

然后在下面，我们映射名称并使用 localeCompare 对字符串进行排序

                    <Col md="6">
                                <FormGroup className="required">
                                    <Label>Operator</Label>
                                    {/* invalid={this.state.well.operator.id === ""} */}
                                    <EInput
                                        type="select"
                                        name="operator"
                                        id="operator"
                                        required={true}
                                        value={this.state.well.operator.id}
                                        onChange={this.handleOperatorChange}
                                        disabled={this.state.well.id !== ""}
                                    >
                                        <option />
                                        {this.state.operatorList.sort((a, b) => a.operatorName.localeCompare(b.operatorName)).map((operator: IOperator, index: number) =>
                                            <option key={operator.id} value={operator.id}>{operator.operatorName}</option>
                                        )}
                                    </EInput>
                                </FormGroup>
                      </Col>

关于为什么会中断以及为什么会突然发生的任何想法？

标签： reactjs