react开发中遇到的问题

1.List分页最后一页只有一条数据,删除最后一条数据的时候,但愿回到前一页,页码数选中。但实际效果是最后页面空白
 当删除肯定时候,获取分页的总条数,pageMax = Math.ceil((总条数total-1)/5)获得最大的页数,而后请求一次服务器,调用分页的接口;并在 Pagination组件中添加并设置current属性。面试

2.let arr = '';
   arr.split("-")    // ['']
  在空的字符串调用split返回的是一个带有空字符串的数组,而不是一个空的数组或者null
  当时遇到一个问题:我在调用同一个数据接口的时候,数据来源不一样的时候后端返回个人数据结构不同致使取不到对应的值而报错。调试的时候发如今空的字符串调用split返回的是一个带有空字符串的数组,而不是一个空的数组或者null

3.  判断对象是空对象: let findCurPlan ={}; Object.keys(findCurPlan).length ===0 或者 JSON.stringify(findCurPlan) != "{}"后端

4.开发中遇到一个问题:数组

 (运营中心)新建一个职位流程,再从表单中查看这个流程的时候,分派使用范围(树型选择控件[tree])处于选中状态。当切换到职位操做的时候,我使用了这个建立的职位流程后变成进行中的职位,再回到运营台修改职位流程的收费节点保存后查看这个职位流程的时候发现分派使用范围处于未选中的状态。服务器

   解决思路:当切换回运营中心的时候,职位流程组件第一次加载,componentDidMount生命周期函数执行,在函数内,判断是否处于编辑状态,若处于编辑状态下,查看调用分派使用范围three接口是否获取正确数据,当从新编辑职位流程后 , 经过setState()改变state数     据从新执行render()函数,渲染出最新的dom,保存修改的流程须要将这些参数传递给传递给后端接口。当我打断点的时候发现,保存的时候,我只有在修改职位流程时传递了所有参数,而在componentDidMount没有传递选中分派使用范围的id数组。antd

5.改bug时遇到的问题:数据结构

 antd Select组件,onChange属性dom

<Select
  value={this.state.guwenVal!==''? this.state.guwenVal:''}
  onChange={this.handelConsultant}
  dropdownMatchSelectWidth= {false}
>
   {allConsultant}
</Select>

//参数若是去掉value,target等于value的值,若是不去掉,打印以下图
ConsultantOnange = (value,target)=>{
    console.log('target',target)
    console.log( target.props.children)  
}

 6.若是方法中须要某些数据,能够将这些数据放在data属性中。函数

<Checkbox 
    onChange={(e)=>this.onChangeOver(e,'noFinishParm')}  
    data={item} 
    checked={item.status===0 ? false :(item.status===1? true:'')}
     id={item.planId}>
</Checkbox>

onChangeOver = (e,parm)=>{
    console.log('e123456',e)
}

 7.开发中遇到一个状况:table中有一列数据随着筛选条件不一样须要增长删除,antd中的table没有相关属性能知足条件。以下作法:oop

let columns3 =[{
                title: this.state.tableTitle,
                dataIndex: this.state.tableDataIndex,
            },{
                title: '新增职位数',
                dataIndex: 'newPosition',
                key:'newPosition',
                align:'center',
            },{
                title: '进展中的职位',
                dataIndex: 'onGoingPosition',
                key:'onGoingPosition',
                align:'center',
            },{
                title: '七天无进展职位',
                dataIndex: 'sevenNoProgress',
                key:'sevenNoProgress',
                align:'center',
            },{
                title: '提交客户报告数',
                dataIndex: 'submitReport',
                key:'submitReport',
                align:'center',
            },{
                title: '一面的候选人数',
                dataIndex: 'interviewFirst',
                key:'interviewFirst',
                align:'center',
            },{
                title: '面试中的候选人总数',
                dataIndex: 'interviewing',
                key:'interviewing',
                align:'center',
            },{
                title: '接受offer的候选人',
                dataIndex: 'acceptOffer',
                key:'acceptOffer',
                align:'center',
            },{
                title: 'offer服务费金额',
                dataIndex: 'offerServiceFee',
                key:'offerServiceFee',
                align:'center',
            },{
                title: 'offer失败的候选人',
                dataIndex: 'offerFail',
                key:'offerFail',
                align:'center',
            },{
                title: 'offer失败的候选人金额',
                dataIndex: 'offerFailFee',
                key:'offerFailFee',
                align:'center',
            },{
                title: '确认入职到岗的候选人',
                dataIndex: 'entry',
                key:'entry',
                align:'center',
            },{
                title: '确认入职到岗服务费金额',
                dataIndex: 'entryFee',
                key:'entryFee',
                align:'center',
            },{
                title: '未成功入职的候选人',
                dataIndex: 'failEntry',
                key:'failEntry',
                align:'center',
            },{
                title: '未成功入职的候选人金额',
                dataIndex: 'failEntryFee',
                key:'failEntryFee',
                align:'center',
            },{
                title: '保证期出局人数',
                dataIndex: 'outCandidate',
                key:'outCandidate',
                align:'center',
            },{            title: '保证期出局金额',
                dataIndex: 'outCandidateFee',
                key:'outCandidateFee',
                align:'center',
            }]
        if(this.state.isGroupNumber){
            columns3.splice(1,0,    {
                title:'团队总人数',
                dataIndex: this.state.personsNumber,
                key:'personsNumber',
                align:'center',
            })
        }
const tableData3 = {
            dataSource:dataSource3,
            columns:columns3,
            pagination: {
                showSizeChanger: true,
                total: dailyOperationsAll.total,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total) => `共 ${total} 条数据`,
                onChange: (pageIndex, pageSize) => {
                    let condition;
                    this.props.form.validateFields((err, values) => {
                        if(!err){
                            condition = {...values, pageIndex, pageSize};
                        }
                    })
                    this.dailyOperations(condition);
                },
            },
            scroll: { x: 2400 },
            loading: {
                spinning:loading3,
                tip:'加载中...'
            }
        };
getReport =()=>{
let objData={};
                let isNext=true;
                if(!!values.employeeId&&isNext){
                    objData={
                        tableTitle:'accountName',
                        tableDataIndex:'accountName',
                        isGroupNumber:false
                    }
                    isNext=false;
                }
                if(!!values.subTeamId&&isNext){
                    objData={
                        tableTitle:'accountName',
                        tableDataIndex:'accountName',
                        personsNumber:'subTeamNum',
                        isGroupNumber:true
                    }
                    isNext=false;
                }
                if(!!values.teamId&&isNext){
                    objData={
                        tableTitle:'subTeamName',
                        tableDataIndex:'subTeamName',
                        personsNumber:'subTeamNum',
                        isGroupNumber:true
                    }
                    isNext=false;
                }
                if(!!values.buId&&isNext){
                    objData={
                        tableTitle:'teamName',
                        tableDataIndex:'teamName',
                        personsNumber:'teamNum',
                        isGroupNumber:true
                    }
                }
                this.setState(objData);
                this.dailyOperations(obj);
                }
}

 8.<a href='www.baidu.com' target="_blank">baidu</a>性能

<a href='www.baidu.com' target="_blank" rel="noopener noreferrer">baidu</a>

9.