react usestate 更新_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 (

{

data.map(itm =>

(

key={itm.key}

disabled={btnArrStatus[`${itm.key}Disabled`]}

onClick={() => handleClick(itm)} />

))

}

);

};

export default TailList;