The push() method encounters an error displaying the message: "Unable to append a new attribute."

Check out the code snippet below:

const saveReserve = () => {
if (polygons && creatingPolygon) {
  let last = creatingPolygon.coordinates[creatingPolygon.coordinates.length - 1][0][0];
  console.log({last, polygons})
  let newline = polygons. Coordinates[0][0].push(last);
  console.log({newLine})
  let oldArray: reservaLegal = {
    coordinates: [
      polygons.coordinates[0],
      creatingPolygon.coordinates[0]
    ],
    type: "MultiPolygon",
  };
  setPolygons(oldArray);
  dispatch(saveLegalReserve(oldArray));
  setCreatingPolygon(null);
} else {
  setPolygons(creatingPolygon);
  dispatch(saveLegalReserve(creatingPolygon));
  setCreatingPolygon(null);
}

};

Whenever this function is called, it causes an error displayed on line 111 of the screen.

let newline = polygons. Coordinates[0][0].push(last);:

https://i.sstatic.net/ejetq.png

This leads to an error in the console as well:

 ERROR  TypeError: cannot add a new property, js engine: hermes

How should I resolve this issue? It seems confusing to me.

Answer №1

The issue you are facing arises from attempting to append a new property to an object that lacks extensibility. While objects in JavaScript are typically extensible, certain JavaScript engines like Hermes (utilized in React Native) may impose limitations on object extensibility.

if (polygons && polygons.Coordinates &&
 Array.isArray(polygons.Coordinates[0] [0])) {
  polygons.Coordinates[0][0].push(last);
  console.log(polygons);
} else {
 console.log('Cannot push to polygons.Coordinates[0][0]');
}

This portion of the code will add 'last' to polygons.Coordinates[0][0] if feasible, or display an error message if not possible. This will aid in pinpointing whether the issue lies within polygons, Coordinates, or polygons.Coordinates[0][0]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include a Generic type into a functional component's props that also extends a different interface for its props?

Explanation I am currently working on developing a dynamic input form using the FormProvider feature from react-hook-form. const formMethods = useForm<TSongFormData>(); return ( <FormProvider {...formMethods}> <SongInputForm /> ...

Quickest method for sorting an array of objects based on the property of another object's array

Within my code, I have two arrays of objects, both containing a "columnId" property. My goal is to rearrange the first array to match the order of the second. I attempted the following method: filtered = visibleColumns.filter(function(v) { re ...

Extracting PNG file from response (bypassing standard JSON extraction)

Despite my efforts to find a solution, I am still unable to resolve this specific issue: I have implemented an Angular request (localhost:4200) to an API on Spring (localhost:8080). The HttpService successfully handles the requests, except when it comes to ...

The 'ngForOf' directive cannot be bound to 'div' element as it is not recognized as a valid property

Encountering an issue with adding an ngFor directive on a div, which is causing a warning and preventing my HTML from rendering properly. I experimented with using *ngFor on various elements like <li>, <tr>, and <span>, but kept getting ...

What is the process for utilizing a user AD account with SecretClient in a node/TypeScript environment?

Currently, I am faced with authentication challenges while attempting to utilize the Azure Key Vault Secret client library (https://www.npmjs.com/package/@azure/keyvault-secrets). Most of the examples provided involve service principal usage, but my requ ...

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Attempting to utilize Spectron for testing my Electron application has been challenging. According to the documentation, in order to locate the nth child element, you can either use an nth-child selector or retrieve all children that match a selector using ...

Developing a custom React hook that utilizes the useContext functions

When attempting to utilize a function within a custom hook, I encounter the following error message: Error: tglCartao is not defined The custom hook code in UseCartao.tsx is as follows: export interface ICartaoContext { idToggleKey : string; ...

Tips for effectively utilizing typescript interface with the OR operator

I'm a beginner when it comes to TypeScript. I have the following code snippet that I am working on: interface InitialData { active: boolean; status: boolean; } interface Item { id: number; name: string; Data: InitialData; } interface Main ...

Identify the appearance of a web component being added to the Document Object

After reading this discussion regarding a web-component I created: <my-vue-web-comp [userId]="1" id="my-component"></my-vue-web-comp> The component functions properly in Angular. How can I determine when the web component h ...

Create a randomized item for experimentation in NodeJs using an interface

Looking for a NodeJs package that can generate fake data in all required fields of a complex object described by a set of typescript interfaces, including arrays and sub-interfaces. Any recommendations? ...

Dealing with string type mismatches in JavaScript when using Typescript

Currently, I am coding in JavaScript with the help of a jsconfig.json file to enhance TypeScript type checking. Unfortunately, it appears that the TypeScript language server is not as advanced as needed to handle these specific situations. The error messa ...

Guide on setting a minimum date in TimePickerAndroid for React Native

I recently created a form using react-native that includes start and end time fields. I noticed that setting the start and end times works fine in iOS but not in Android. After checking the official documentation, I learned that the min time option is no ...

Assistance required in creating a numerical list from an array of objects

I'm currently facing an issue with creating a numbered list from an array of objects. Below, you'll find the code containing the objects. You need to add the necessary TS code to display the atom names along with their weights in a numbered list ...

Creating keys from extensive JSON data without having to manually match types using Typescript

Is there a way to efficiently parse and access the values in large JSON files using Typescript, without the need to manually define interfaces for all expected key/value pairs? In the past, working with small JSON files required only extracting a few spec ...

Error: The program encountered a type error while trying to access the '0' property of an undefined or null reference

I am a beginner in the world of coding and I am currently working on creating an application that allows users to add items to their order. My goal is to have the quantity of an item increase when it is selected multiple times, rather than listing the same ...

How do I repeatedly display an HTML element using a loop in Typescript?

As a newcomer to Typescript, I am attempting to create a function that generates multiple buttons based on the data stored in an array. Initially, I tried using a for loop like this: splitLabels(Array: any){ if (typeof Array != "undefined& ...

Suddenly, the private react-native library seems to have disappeared from view despite being clearly present in the node_modules directory

I'm currently working on a react-native project that relies on a private react-native library. Up until recently, everything was running smoothly. However, I've encountered an issue where I'm seeing the error message Cannot find module &apos ...

API Router in Express with TypeORM returning 404 error when handling POST request

I've encountered a tricky bug while attempting to make POST requests to a test endpoint on my local server. My approach involves using Insomnia to send a basic Register JSON POST request to http://localhost:5000/api/auth/register with the following d ...

Building Unique Password Validation with Angular 5

I'm attempting to implement custom password validation for a password field. The password must be a minimum of 8 characters and satisfy at least two of the following criteria but not necessarily all four: Contains numbers Contains lowercase letters ...

An error message popped up stating, "Property 'dispatch' is undefined in React-Native with Redux."

After the firebase authentication manager confirms that there is no authenticated user, I want to trigger an action within my componentWillMount() function. Below is the code snippet: import React, { Component } from 'react'; import { View, Tex ...