为对象数组创建新属性时,对象不可扩展错误

IT技术 javascript reactjs
2021-04-21 13:16:16

我有一个需要扩展 javascript 数组的函数,包括一个名为 的新属性selected

export const initSelect = (data) => {

    let newData = data.concat();
    newData.map((item) => {
        item.selected = false;
    })

    return newData;
}

data是一个 ReactJS 状态值(来自this.state.data调用函数时),但这似乎不是问题,因为newDatadata数组的新副本......

我收到以下错误:

TypeError: Cannot add property selected, object is not extensible
4个回答

您可能需要复制对象:

export const initSelect = (data) => {
 return data.map((item) => ({
     ...item,
     selected: false       
 }));
}
@Jonasw 操作误用了 concat 和 map。我认为您的解决方案也不应该滥用它们。
2021-06-13 13:16:16
返回的对象会是 的副本data吗?我将使用返回来设置 ReactJS 对象状态....
2021-06-21 13:16:16

你不能itemselected属性扩展,你的数组只是一个浅拷贝。

如果您希望能够扩展,则必须对数组进行深度复制。这可能就足够了:

let newData = data.map((item) => 
    Object.assign({}, item, {selected:false})
)
你是完全正确的。我不记得当时的情况,但可能是的,我做错了什么。您的解决方案完全有效:+1:
2021-06-07 13:16:16
那么可能你做错了什么@RocíoGarcíaLuque,因为根据我对stackoverflow.com/a/50558264/2832398 的理解,Jonas 的解决方案和我的解决方案是等效的
2021-06-08 13:16:16
我在 Object.assign 方法中看到了同样的错误。我设法使用@Jonas anwer 解决了它。
2021-06-12 13:16:16
data = JSON.parse(JSON.stringify(data)));
你可以依靠 lodash.deepClone(data) 来避免嵌套数据丢失
2021-05-30 13:16:16
对于我的“不可推”阵列,这是完美的
2021-06-05 13:16:16
这似乎是一些不必要的“字符串化”。也可能存在无法data字符串化的对象,因此会破坏原始数据。
2021-06-19 13:16:16

const newObj = Object.assign({selected: false}, data);

虽然此代码片段可能会解决问题,但包括解释确实有助于提高帖子的质量。请记住,您是在为将来的读者回答问题,而那些人可能不知道您提出代码建议的原因。
2021-06-01 13:16:16
请记住,这个代码 afaik 是不等价的。例如,如果数据已经包含 selected: true ,则新对象将以 selected: true 结束。
2021-06-13 13:16:16