useState动态更新数据

问题
数组渲染组件，每一个都使用useState太冗余了，特别是表单填写的时候。

解决方法
对象的扩展运算符

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

• 如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

自定义属性在扩展运算符前面

• 如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值。

默认属性

通过对象扩展运算符，更新一个对象的不同属性值，这样就可以使用一个hook来动态更新所有（有规律）的数据状态。

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;