問(wèn)題描述
今天重構(gòu)項(xiàng)目的路由代碼，遇到了一個(gè)問(wèn)題暇屋，在app.js 的文件中，我使用react-router路由如下：
<Route exact path='/program/:programId/task/:taskId/section/:sectionId/excellent-assignment-list' component={ExcellentAssignmentListPageBody}/>
在組件ExcellentAssignmentListPageBody中我點(diǎn)擊某鏈接的時(shí)候跳轉(zhuǎn)到另一個(gè)頁(yè)面ExcellentAssignmentPageBody撞叽，代碼如下：
goExcellentSection (sectionId) {
this.props.history.push('/student/program/1/task/1/section/1/excellent-assignment')
}
現(xiàn)象：在前端頁(yè)面中我點(diǎn)擊按鈕本來(lái)應(yīng)該跳轉(zhuǎn)的ExcellentAssignmentListPageBody頁(yè)面中季蚂，但是并沒(méi)有勿决，直接跳到了ExcellentAssignmentPageBody頁(yè)面
矛盾點(diǎn)
根據(jù)路由分析乒躺，應(yīng)該跳轉(zhuǎn)頁(yè)面到ExcellentAssignmentListPageBody，而不是直接跳轉(zhuǎn)到ExcellentAssignmentPageBody,只有點(diǎn)擊ExcellentAssignmentListPageBody頁(yè)面內(nèi)的鏈接低缩，才會(huì)跳轉(zhuǎn)ExcellentAssignmentPageBody嘉冒，這是為什么呢曹货？
問(wèn)題解決
Q1:開始懷疑是在app.js 中寫錯(cuò)了路由的組件名？
A1:仔細(xì)檢查后發(fā)現(xiàn)讳推，路由和組件都是對(duì)的顶籽。
Q2：接著懷疑是react-router 的問(wèn)題，是用錯(cuò)了银觅？
A2: 網(wǎng)上搜索后發(fā)現(xiàn)使用方法是的對(duì)的
Q3: 在ExcellentAssignmentListPageBody頁(yè)面礼饱，console.log()打印了一個(gè)字符串，結(jié)果在控制臺(tái)中打印出來(lái)了究驴，說(shuō)明該組件確實(shí)被渲染镊绪，渲染后瞬間就跳往了另一個(gè)組件，仔細(xì)看在控制臺(tái)有這樣的錯(cuò)誤：proxyConsole.js:54 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.從提示上來(lái)看洒忧，是因?yàn)槲以趓ender 里面或者是constructor 里面使用了setState嗎蝴韭？
A3: 在項(xiàng)目中全局搜索setState,并沒(méi)有在render 或contructor 里面setState.那么問(wèn)題在哪？展開錯(cuò)誤提示熙侍，發(fā)現(xiàn)了這樣的一句代碼<a onClick={this.goExcellentSection(this, excellentHomework.section.id)}>作業(yè)鏈接</a>榄鉴，有一種想拔根頭發(fā)分分鐘吊死的沖動(dòng)。蛉抓。庆尘。
Q4:分析一下，為什會(huì)這樣巷送？
A4:網(wǎng)上搜索减余，bind()方法會(huì)創(chuàng)建一個(gè)新函數(shù)，當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)惩系，它的this值是傳遞給bind()的第一個(gè)參數(shù), 它的參數(shù)是bind()的其他參數(shù)和其原本的參數(shù). 什意思呢位岔？bind即將goExcellentSection函數(shù)與這個(gè)組件Component進(jìn)行綁定以確保在這個(gè)處理函數(shù)中使用this時(shí)可以時(shí)刻指向這一組件。
如果沒(méi)有bind的話堡牡，像之前那樣抒抬，那么就成函數(shù)調(diào)用了。當(dāng)代碼執(zhí)行到這里的時(shí)候們就直接調(diào)用了晤柄，調(diào)用后push 了路由擦剑，頁(yè)面的渲染自然也就變了。芥颈。惠勒。
加上bind后，問(wèn)題就解決了
反思
- 開發(fā)中沒(méi)有做到小步提交爬坑，一下子改了很多代碼纠屋，不能快速的診斷問(wèn)題在哪里
- 不仔細(xì)看錯(cuò)誤的提示，沒(méi)有點(diǎn)開錯(cuò)誤盾计，導(dǎo)致浪費(fèi)了很多的時(shí)間
action
- 開發(fā)時(shí)售担，小步提交
- 遇到問(wèn)題時(shí)從提示中找解決方法赁遗，仔細(xì)看提示
