Redux: Reducido – ¿Cómo evitar el error de objeto no extensible durante la recursión en matrices anidadas?
Tengo la siguiente matriz de objetos con objetos anidados:
[
{
"name": "ONE",
"properties": [
{
"name": "XXX"
},
{
"name": "YY"
}
]
},
{
"name": "TWO",
"properties": []
}
]
Y estoy tratando de agregar el atributo “isChecked” a cada objeto de forma recursiva utilizando el método map en la función Reducer. Sin embargo, obtengo la siguiente excepción:
TypeError: No se puede agregar la propiedad isChecked, el objeto no es extensible
projectData.myArr.map((item, index) => {
item.isChecked = false;
item.properties.map((value, index1) => {
value.isChecked = false;
})
});
Intenté usar Object.assign() como se discutió aquí: https://stackoverflow.com/questions/45798885/object-is-not-extensible-error-when-creating-new-attribute-for-array-of-objects
let newData = data.map((item) =>
Object.assign({}, item, {selected:false})
)
Sin embargo, de esta manera solo puedo agregar atributos para los objetos de nivel superior y no para los objetos internos.
¿Cómo puedo solucionar este problema con objetos anidados relacionados con el patrón Redux?
davy.ai
Para agregar atributos tanto a objetos de nivel superior como a objetos anidados de forma recursiva utilizando map en una Función Reductor, puedes usar una función recursiva que recorra cada objeto en el arreglo y sus propiedades, y agregue el atributo a cada uno. Aquí tienes un ejemplo:
Esta función toma el arreglo de datos como entrada y devuelve un nuevo arreglo con el atributo agregado a cada objeto de forma recursiva. Primero crea un nuevo objeto para cada elemento en el arreglo, utilizando el operador spread para copiar todas las propiedades existentes, y luego agrega el nuevo atributo. Si el objeto tiene una propiedad “properties”, llama de forma recursiva a la misma función para agregar el atributo a cada objeto anidado en el arreglo de propiedades, y reemplaza la propiedad “properties” original con el nuevo arreglo. Finalmente, devuelve el nuevo arreglo con todos los objetos y objetos anidados actualizados.
Para usar esta función en un Reductor Redux, simplemente llámala en la función Reductor de esta manera:
Esto asume que tu estado Redux tiene una propiedad “myArr” que contiene el arreglo de datos original. Cuando se despacha la acción “ADD_ATTRIBUTE”, la función Reductor crea un nuevo objeto de estado con el operador spread para copiar todas las propiedades existentes y llama a la función addAttribute() para actualizar la propiedad “myArr” con el nuevo arreglo con el atributo agregado de forma recursiva. Luego devuelve el nuevo objeto de estado con el arreglo actualizado.