需求背景

有一個(gè)表格，點(diǎn)擊表格每一行的一個(gè)叫"查看數(shù)據(jù)記錄"的按鈕，打開一個(gè)抽屜，會(huì)調(diào)后端一個(gè)接口(這里我們叫它接口A)，其中一個(gè)參數(shù)是抽屜里下拉框選中的當(dāng)前id(就是下文中的pid)

問題描述

表格每一行紅框圈出來的這個(gè)按鈕(圖1)，點(diǎn)擊后會(huì)彈出一個(gè)抽屜(圖2)，抽屜里面有一個(gè)下拉框， 需求要求每次打開都默認(rèn)選中"主版本"，  遇到的問題是: 打開表格第二行的抽屜，此時(shí)改變下拉框使其選中"分支一"，  然后再去打開表格第三行的抽屜，下拉框選中的id是"主版本"的id，但是顯示的依然是    "分支一"的名字!

圖(1)

圖(2)

--------------------------------分割線--------------------------------

原因分析

前提

這里組件都是類組件寫的，抽屜中的select組件綁定的defaultValue叫pid(下面就直接說pid了)，抽屜組件里用了componentWillReceiveProps和componentDidMount兩個(gè)生命周期，接口A在這兩個(gè)生命周期都有調(diào)用， 我在這兩個(gè)鉤子里發(fā)現(xiàn)我每次拿到的pid都是對的，但是切換某一個(gè)抽屜的下拉框，再打開別的抽屜，下拉框顯示的名字永遠(yuǎn)是上次下拉框選擇的名字(但pid是對的)

當(dāng)時(shí)想到的原因如下

1) :  一開始覺得是抽屜關(guān)閉的時(shí)候我沒有重新更新defaultValue綁定的值，于是關(guān)閉抽屜的時(shí)候手動(dòng)更新了一下，但是并沒有如愿解決我的問題

2): 由于此時(shí)我的pid是聲明在state里的數(shù)據(jù)，我的pid在這兩個(gè)鉤子里都做了setState為"主版本"的id，更新pid的過程大概就是: 

• 1.第一次打開表格第二行的抽屜時(shí),  在componentDidMount 更新pid為"主版本"的id, 當(dāng)我切換下拉框?yàn)榉种б粫r(shí), 就setState   pid為"分支一""的pid,
• 2.基于第一條的操作, 此時(shí)當(dāng)我再打開表格第三行的抽屜時(shí), 只會(huì)執(zhí)行componentWillReceiveProps, 在這個(gè)鉤子, 由于我也setState為"主版本"的id, 所以render里我拿到的pid不是"分支一"id,  而是我們想要的主版本的id,  render里拿到的id也確實(shí)是"主版本"的id, 但是顯示的還是"分支一"
• 3.基于以上兩條的操作, 在網(wǎng)上找了一下答案, 看到使用componentWillReceiveProps,props改變時(shí)組件才會(huì)重新渲染,  state里的數(shù)據(jù)改變并不會(huì)使子組件刷新, (不過我對這個(gè)說法有點(diǎn)懷疑,因?yàn)閞ender里拿到的數(shù)據(jù)已經(jīng)是更新后的"主版本"的id了), 于是我把pid抽出來,寫在了抽屜的父組件里,由父組件傳過來, 再在這兩個(gè)鉤子里更新父組件里的pid

沒出意外，依然沒有解決問題!!!

3):  既然不行，那我就只能繼續(xù)找原因了，由于之前遇到過一個(gè)類似問題: 

• 給一個(gè)表單設(shè)置了initValue，但是當(dāng)initValue綁定的值變化時(shí)，我的表單顯示的值并沒有更新，有人跟我說使用initValue的時(shí)候，數(shù)據(jù)更新不會(huì)更新頁面，讓我用setFieldsValue，由于之前用setFieldsValue也確實(shí)解決了表單值沒更新的問題，那我就不偷懶了，試試改成表單用setFieldsValue吧! 

結(jié)果又沒出意外，問題依然沒解決!!!

4):  實(shí)在找不到原因了，心態(tài)崩了呀!   不找了，就這樣放了一周，當(dāng)然期間沒有閑著，而是去寫別的任務(wù)改別的bug了，每天都想起來這個(gè)沒解決的bug，睡前都要想一下到底為什么呢?明明拿到了正確的id，為什么名字不對呢..............

解決方案

一周過去了，今天本來該提測 ，結(jié)果后端那里有bug，沒有提測，那我就再找找原因吧，在交給測試測之前盡量解決掉這個(gè)問題，結(jié)果一行代碼解決了困擾了我一周的問題!

就是加了這個(gè)key，就這樣解決了我的問題~~~~~~~~~~~~

tip：

總結(jié)

或許這個(gè)問題很簡單，但是解決這個(gè)問題的那一刻，真的很激動(dòng)! 寫這個(gè)文章只是為了記錄一下這個(gè)讓我印象深刻的問題，同樣給踩到同樣坑的工友一個(gè)參考! 或許我很菜，但我在學(xué)了，如果有說的不夠詳細(xì)或者不對的地方，希望大佬們給我補(bǔ)充更正，先謝為敬! 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論