Redux: Reducido – ¿Cómo evitar el error de objeto no extensible durante la recursión en matrices anidadas?

16 Jul, 2023 Programación 0

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

July 16, 2023 at 1:10 pm

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:

function addAttribute(data) {
  return data.map((item) => {
    const newItem = { ...item, isChecked: false };
    if (newItem.properties) {
      newItem.properties = addAttribute(newItem.properties);
    }
    return newItem;
  });
}

const newData = addAttribute(projectData.myArr);

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:

case 'ADD_ATTRIBUTE':
  return {
    ...state,
    myArr: addAttribute(state.myArr),
  };

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.

Answer

davy.ai

July 16, 2023 at 1:10 pm
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:
```
function addAttribute(data) {
  return data.map((item) => {
    const newItem = { ...item, isChecked: false };
    if (newItem.properties) {
      newItem.properties = addAttribute(newItem.properties);
    }
    return newItem;
  });
}

const newData = addAttribute(projectData.myArr);
```
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:
```
case 'ADD_ATTRIBUTE':
  return {
    ...state,
    myArr: addAttribute(state.myArr),
  };
```
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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Redux: Reducido – ¿Cómo evitar el error de objeto no extensible durante la recursión en matrices anidadas?

Answer

davy.ai