javascript - Object is not extensible error when creating new attribute for array of objects - Stack Overflow

admin管理员组

文章数量:1135124

I have a function that needs to extend a javascript array, including a new attribute called selected:

export const initSelect = (data) => {

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

    return newData;
}

data is a ReactJS state value (comes from this.state.data when calling the function), but this didn't seem to be a problem as newData is a new copy of data array...

I'm getting the following error:

TypeError: Cannot add property selected, object is not extensible

I have a function that needs to extend a javascript array, including a new attribute called selected:

export const initSelect = (data) => {

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

    return newData;
}

data is a ReactJS state value (comes from this.state.data when calling the function), but this didn't seem to be a problem as newData is a new copy of data array...

I'm getting the following error:

TypeError: Cannot add property selected, object is not extensible

• javascript
• reactjs

Share Improve this question Follow edited Sep 20, 2019 at 16:05 CommunityBot 111 silver badge asked Aug 21, 2017 at 13:52 MendesMendes 18.4k3838 gold badges164164 silver badges281281 bronze badges 1

• 7 In order to really understand this error this here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… might help. – Elmar Zander Commented Aug 21, 2020 at 9:18

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 141

You probably need to copy the objects:

export const initSelect = (data) => {
 return data.map((item) => ({
     ...item,
     selected: false       
 }));
}

You can not extend item with selected property, and your array is just a shallow copy.

If you want to be able to extend, you will have to do a deep copy of your array. It may be enough with:

let newData = data.map((item) => 
    Object.assign({}, item, {selected:false})
)

data = JSON.parse(JSON.stringify(data));

As of 2024 use: structuredClone(value, options)

https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

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

本文标签： javascriptObject is not extensible error when creating new attribute for array of objectsStack Overflow