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

【问题标题】：Update all Object Elements of a State Array with React Hooks使用 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() 函数返回了一个数组，但我似乎错了。我也找不到我的问题的答案。提前致谢。

【问题讨论】：

标签： reactjs react-hooks react-functional-component

【解决方案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)

【讨论】：