React關于antd table中select的設值更新問題

更新時間：2024年03月22日 09:56:07 作者：jwensh

這篇文章主要介紹了React關于antd table中select的設值更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題 1. 默認值問題（沒有顯示placeholer）

描述：

正常情況下，表格一列下不同行，可能有不同值，這些值設值到 select 希望展示不同的樣式;

如空值（0；’’）,應該顯示 placeholder

<Select
  showSearch
  suffixIcon={<SearchOutlined />}
  style={{ width: 150 }}
  placeholder="請選擇設置項"
>
...
</Select>

上面的寫法會顯示 placeholder 內容，但是沒有進行設值操作

// react + typescript
render : (text: React.ReactNode, record: TaskListType) => (
    <Select
      showSearch
      value={text as string}
      suffixIcon={<SearchOutlined />}
      style={{ width: 150 }}
      placeholder="請選擇設置項"
    >
    ...
    </Select>
)

上面 text 是 antd table column 傳過來的值，且值是空值
結果：還是不能展示 placeholder
這里直接說結論吧，不吃丸子了

select 的 value、defaultValue、key

defaultValue 和 value 區(qū)別？

defautValue 指定默認值，也就是我們頁面加載時，通過 dataSource 設置進來的數據；

value 指定當前選中值，通過下拉列表 option 選中后的值；

問題：使用defaultValue會有一個問題,對頁面進行數據處理后數據沒有及時更新，需要用 value 解決此問題

解決：空值展示 placeholder ，需要設置為 undefined

// react + typescript
render : (text: React.ReactNode, record: TaskListType) => (
    <Select
      showSearch
      value={record.setting === '' ? undefined : record.setting}
      suffixIcon={<SearchOutlined />}
      style={{ width: 150 }}
      placeholder="請選擇設置項"
    >
    ...
    </Select>
)

官網看到：

export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;

也實驗過 null ts eslint 直接提示不行，所以，想要了解其深度原理，可看源碼

問題2. 更新一行數據后，select 的 selectValue 狀態(tài)沒有變化

更新 select 的值有兩個渠道

1.通過下拉框選擇 option
2.其他事件更新了當前行數據（如: setting=‘user’ => setting=’’）

第二個方案應該是我們經常用的，如下寫法是不生效的

render : (text: React.ReactNode, record: TaskListType) => (
    <Select
      showSearch
      value={record.setting === '' ? undefined : record.setting}
      suffixIcon={<SearchOutlined />}
      style={{ width: 150 }}
      placeholder="請選擇設置項"
    >
    ...
    </Select>
)


// 更新操作是 Hooks 函數直接 setTaskList([...dataSource])

不管使用 value 還是 defaultValue 都不生效；

解決：為 select 添加一個 key 的 props

實現非受控組件（用defaultValue），兩個辦法

第一個服務端沒有返回數據的時候，不 render Select，render 一個占位的 placeholder;
給 Select 加一個 key，值為 defaultValue;

render : (text: React.ReactNode, record: TaskListType) => (
    <Select
      showSearch
      value={record.setting === '' ? undefined : record.setting}
      key={record.setting}
      suffixIcon={<SearchOutlined />}
      style={{ width: 150 }}
      placeholder="請選擇設置項"
    >
    ...
    </Select>
)

問題3. antd table 局部一行數據更新

// 某一行數據更新調用的方法
const handleSave = (row: TaskListType) => {
    // 從新將數據 copy 一波
    const newData = [...dataSource];
    // 找到操作更新的數據在源數據中的下標
    const index = newData.findIndex(item => row.key === item.key);
    // 找到對應更新的數據
    const item = newData[index];
    // 將新數據中的數據進行更新
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    // useState 更新即可
    setTaskList(newData);
  };