react開發中遇到的問題

時間 2019-12-09

標籤 react 開發遇到問題欄目 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);
                }
}