需求背景

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

問題描述

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

圖(1)

圖(2)

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

原因分析

前提

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

當時想到的原因如下

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

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

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

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

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

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

結果又沒出意外，問題依然沒解決!!!

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

解決方案

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

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

tip：

總結

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

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