使用 React Hooks 更新状态数组的所有对象元素

Posted 2023-02-22

【中文标题】使用 React Hooks 更新状态数组的所有对象元素

【英文标题】：Update all Object Elements of a State Array with React Hooks

【发布时间】：2021-04-07 03:51:08

【问题描述】：

我有一个存储这些对象的状态数组：

const hoursArr = [
     value: 1, label: "hour" , isDisabled:false,
     value: 2, label: "hours" , isDisabled:false,
     value: 3, label: "hours" , isDisabled:false,
     value: 4, label: "hours" , isDisabled:false,
     value: 5, label: "hours" , isDisabled:false,
     value: 6, label: "hours" , isDisabled:false
]

然后我将这些对象分配到数组中

const [hours,setHours] = useState(hoursArr);

我想要实现的是迭代整个数组并将isDisabled 属性从false 更改为true。

我已经这样做了：

let tmpHours = [];
tmpHours=hours.map(item=>item.isDisabled=false);

但是tmpHours 并没有存储整个对象，而只存储了布尔值false。

我认为map() 函数返回了一个数组，但我似乎错了。我也找不到我的问题的答案。 提前致谢。

【参考方案1】：

let tmpHours = [];
tmpHours=hours.map(item=>(...item, isDisabled: true));

【讨论】：

谢谢！我会像你一样接受你的回答。但我想问为什么我们需要括号 () ？我的意思是我看到我们在那里替换了isDisabled 属性，但我没有得到括号。

map()的参数应该是一个回调，从旧项目返回一个新项目。 item => (..item, isDisabled: true) 等同于 item => return ...item, isDisabled: true

我不知道那个。所以你说(...item, isDisabled:true)而不是return 。好东西！同样在您的回答中，您错过了右括号)

【参考方案2】：

Map 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的函数的结果。您在迭代旧数组以修改 isDisabled 键值时缺少创建新元素。

你可以这样做：

    const hoursArr = [
         value: 1, label: "hour" , isDisabled:false,
         value: 2, label: "hours" , isDisabled:false,
         value: 3, label: "hours" , isDisabled:false,
         value: 4, label: "hours" , isDisabled:false,
         value: 5, label: "hours" , isDisabled:false,
         value: 6, label: "hours" , isDisabled:false
    ]
    
    const tmpHours = hoursArr.map((item) => 
        return  ...item, isDisabled: true ;
    );

【参考方案3】：

const hoursArr = [
     value: 1, label: "hour" , isDisabled:false,
     value: 2, label: "hours" , isDisabled:false,
     value: 3, label: "hours" , isDisabled:false,
     value: 4, label: "hours" , isDisabled:false,
     value: 5, label: "hours" , isDisabled:false,
     value: 6, label: "hours" , isDisabled:false
]

let tmpHours = [];
tmpHours=hoursArr.map(item=>(...item,isDisabled:false));
console.log(tmpHours)