快捷導(dǎo)航

antd-react使用Select組件defaultValue踩的坑及解決

更新時間：2023年05月12日 08:42:24 作者：半糖氣泡。

這篇文章主要介紹了antd-react使用Select組件defaultValue踩的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

需求背景

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

問題描述

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

圖(1)

圖(2)

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

原因分析

前提

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

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

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

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

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

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

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

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

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

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