首先來一次問題的描述吧,個人感覺這樣學習的方法不錯。
關於Redux中state改變而render不渲染的問題。
實際問題場景如下:
數據:一個數組dateList,一個對象activeObj。
["2013","2014"],{}
在手風琴組件內,我們根據數組遍歷生成對應List,併爲其添加onChange監聽。
理想效果爲,根據點擊的List發送ajax請求,在請求完成之前顯示loading,並在ajax請求完成後顯示相應數據。
實際效果爲,無論你點擊哪一個,都顯示loading。
錯誤代碼爲:
// ajax請求後處理res
.then(res=>{
let result;
if(!this.props.activeObj){
// 處理默認情況
result={
[date]:res.data.shiftList
};
}else{
// 問題關鍵部分
result = this.props.activeObj;
result[date] = res.data.shiftList;
}
this.props.setActiveObj({
payload: result
});
錯誤主要原因:
而錯誤主要原因是沒有好好理解Redux中state到底是個什麼東西。
我們在通過this.props.setActiveObj(一個封裝的dispatch)修改了activeObj對象。
而Redux中state樹的改變是受我們操作影響的。result = this.props.activeObj
僅僅只是賦值了引用,而我們的修改 result[date] = res.data.shiftList
也是在原來的activeObj對象上修改。所以導致結果是Redux沒有發現state樹的變化,所以並沒有觸發render刷新我們的視圖。
總結
基本概念要熟,爬坑才足夠迅捷,抓蟲不要想的太複雜,錯的往往都很簡單。
PS:自己封裝些異步請求組件吧。