問題
數(shù)組渲染組件，每一個(gè)都使用useState太冗余了，特別是表單填寫的時(shí)候。

解決方法
對(duì)象的擴(kuò)展運(yùn)算符

對(duì)象的擴(kuò)展運(yùn)算符（...）用于取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中。

• 如果用戶自定義的屬性，放在擴(kuò)展運(yùn)算符后面，則擴(kuò)展運(yùn)算符內(nèi)部的同名屬性會(huì)被覆蓋掉。

自定義屬性在擴(kuò)展運(yùn)算符前面

• 如果把自定義屬性放在擴(kuò)展運(yùn)算符前面，就變成了設(shè)置新對(duì)象的默認(rèn)屬性值。

默認(rèn)屬性

通過對(duì)象擴(kuò)展運(yùn)算符，更新一個(gè)對(duì)象的不同屬性值，這樣就可以使用一個(gè)hook來動(dòng)態(tài)更新所有（有規(guī)律）的數(shù)據(jù)狀態(tài)。

import React, { useState, useEffect } from 'react';

const TailList = ({ data = [] }) => {
  const [btnArrStatus, setBtnArrStatus] = useState({});
  
  const handleClick = (btnObj) => {
    const { jumpUrl = '', key } = btnObj;
    setBtnArrStatus({
      ...btnArrStatus,
      [`${key}Disabled`]: true,
    });
    window.location.href = jumpUrl;
  };

  return (
    <div>
      {
        data.map(itm =>
          (
            <button
              key={itm.key}
              disabled={btnArrStatus[`${itm.key}Disabled`]}
              onClick={() => handleClick(itm)} />
          ))
      }
    </div>
  );
};

export default TailList;