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

Question

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

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() 函数返回了一个数组，但我似乎错了。我也找不到我的问题的答案。提前致谢。

Answer 1

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

Answer 2

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)

Answer 3

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 };
    });

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

Update all Object Elements of a State Array with React Hooks

reactjs

react-hooks

react-functional-component