cindylyu / bug-records Goto Github PK

• API POST 格式：

"data": [
    {
        "name":  "susan",
        "type": "occupation",
        "value": "teacher",
    },
    {
        "name":  "leo",
        "type": "dream",
        "value": [
            "policeman",
            "fireman",
        ]
    },
]

• 介面呈現：
  

• 需求：使用者選 type 為 dream 時，就需要將 value 中的字串轉成陣列（假設使用者已知道如需填入多個內容會需要用半形逗號去區隔）；如果 type 是 occupation 時 value 就是保留原始字串的格式來儲存

• 原先寫法：當使用者填寫 value 時去看他先前選的 type 是什麼來依據存入對應的格式（字串轉陣列或直接保留原始字串）

• 衍生的問題：當使用者不是造順序先填寫 type 在填寫 value 時，而是填寫完 value 卻要去改 type 時填寫完 value 卻要去改 type 時 value 值就不會被更改到適當的格式
  例：使用者選的 type 為 occupation 後在填寫 value 時決定以 dream 的格式來寫，所以寫下「警察, 消防員」，再將前面的 type 選項更改成 dream，但因為先前的 value 先依據 occupation 的格式來儲存，所以最後 post 出去的內容會是 '警察, 消防員' 而不是預期的 ['警察', '消防員']

• 改善方式：

  • 方式一：使用者在改變 type 時就將 value 清空，這樣下次使用者就會需要再次填入 value，就可以依據 type 來儲存對應的格式
  • 方式二：使用者點選 submit 時再去依據 type 的內容更改 value 的資料格式，而不是在填入 value 的當下就儲存好對應的格式

• 需求：透過 checkbox 的勾選狀態來調整要顯示 input 或是 textarea

• 原先寫法：

/* css */
.container {
    display: flex;
}

// js
class Demo extends React.Component {
    state = {
        status: false
    };

    onChange = (e) => {
        this.setState({
            status: e.target.checked
        });
    };

    render() {
        const { status } = this.state;
        return (
            <>
                <div>
                    <Checkbox onChange={(e) => this.onChange(e)}>顯示 input 1</Checkbox>
                </div>
                <div className="container">
                    {status ? (
                        <input value="我是 input 1" />
                    ) : (
                            <TextArea
                                placeholder="Autosize height based on content lines"
                                autoSize={{ minRows: 10 }}
                                value="我是 textarea"
                            />
                        )
                    }
                    <Input value="我是 input 2" />
                </div>
            </>
        );
    }
}

• 衍生的問題：

尚未取消勾選顯示 input 1，input 2 顯示正常高度

當取消勾選顯示 input 1 時，input 1 替換顯示成 textarea，input 2 卻非預期的隨著 textarea 的高度變化

• 改善方式：由於外層 container 寫了 display: flex 後其裡面只要是 display: inline-block的元素（像是 <input> 或 <button> ）就會隨著容器的寬度變化，也就是繼承了預設的 align-items: stretch

  • 方式一：在 input 外層多包上 <div></div>
  • 方式二：在該 input 新增 height: 100%

• 參考來源：

1. Chrome / Safari not filling 100% height of flex parent

• API GET 格式包含不重複的 ID、對應各個欄位的資料

• 介面呈現：
  
  （截圖來源：Ant Design Table）

• 需求：透過 API 拿到並顯示整個 list 包含展開表格後的資料（使用 Ant Design table 預設 10 筆為一頁）

• 原先寫法：當使用者點選某個資料時會展開表格，抓取該資料在表格中的 index 值後去原始的資料找出對應的 index 值來顯示其他的資料欄位

• 衍生的問題：沒有顧慮到換頁的情況，所以第一頁及第二頁的第一筆資料展開後顯示的內容會是一樣的（因為第一頁及第二頁第一筆資料的 index 值都會是 0）

• 改善方式：

  • 方式一：抓取的 index 需要多考慮頁數的狀態，預設為第一頁，最後的 index 值會是 index + (page - 1) * 10（10 筆為一頁），所以當使用者點選第二頁第一筆資料時的 index 值會變成 0 + (2 - 1) * 10 = 10，這樣利用 index 去比對兩個陣列中的資料就不會錯誤了
  • 方式二：利用不重複的 ID 值去原始的資料找出對應的資料

• 一些 murmur：
  覺得這是一件蠻基本的事情，但還是犯了兩次同樣的錯，造成顯示錯資料的 bug，有時候好像會被資料量一多或是太混亂而犯一些不該犯的錯誤

• 需求：打開彈窗並滾動時，不要滾動到後面的 body
• 解決方式：當打開彈窗時設定 body 的 css 為

body.open-popup {
  overflow: hidden;
  position: fixed; /*  如果沒加此行在 safari ios 上還是能夠滾動到 body */
}

• 參考來源：

1. Prevent Scroll Chaining With Overscroll Behavior

• API 格式：

"distance": {
    "cm": 5
}

• 介面呈現：
  

• 需求：使用者可填入距離數值，也可以更換單位

• 原先寫法：

let distanceUnit;
let distanceValue;

if (distance.cm) {
    distanceUnit = 'cm';
    distanceValue = distance.cm;
} else if (distance.m) {
    distanceUnit = 'm';
    distanceValue = distance.m;
} else if (distance.km) {
    distanceUnit = 'km';
    distanceValue = distance.km;
}

利用 distance.cm 是否為 ture 來判斷目前單位是否為 cm，如果是也可以利用 distance.cm 來取出 value 或回填回去

• 衍生的問題：忽略了當欄位為空時就會造成 false 的情況，就會完全抓取不到目前單位及值，所以下次使用者要填寫時就會填不進去，無論輸入什麼值都寫不進去
• 改善寫法：

let distanceUnit;
let distanceValue;

if ('cm' in distance) {
    distanceUnit = 'cm';
    distanceValue = distance.cm;
} else if ('m' in distance) {
    distanceUnit = 'm';
    distanceValue = distance.m;
} else if ('km' in distance) {
    distanceUnit = 'km';
    distanceValue = distance.km;
}

改利用 in operater 來判斷 cm、m、km 是否存在 distance，這樣就不會因為空值而產生 false 的問題