I am using external property to update state data but seeing the error while updating the state variable.
ERROR TypeError: Cannot assign to read only property ‘source’ of object ‘[object Object]’
If this is a runtime error, please provide more details such as the stack trace and the properties of that Object, the state Object, and the draft Object.
I am using the State property like this.state =
{
skipsDiagramUpdate: false,
diagramNodeData: [],
diagramLinkData: [],
//diagramModelData: { prop: ‘value’ },
};
i have one property panel which contains some properties and I am updating one property panel it will update my State object shown below image.I am using an output event to send data from one component to the second component.
error message : Cannot assign to read only property ‘source’ of object ‘[object Object]’
What is the Object that is the cause of the error message?
state object
But the state object that you showed doesn’t have a “source” property, so the run-time couldn’t have raised an error saying that that property was read-only.
this is my state object
Source: string;
MetaDataDTO: SNMMetaDataUnit;
Location: any;
Text: any;
SVGFile: any;
isNewEquipment: boolean;
diagramNodeData: DiagramHelper.mapImagesToSource(this.inputDiagram.diagramNodeData, this.networkModelDiagramSrv),
above line throw s the error.
inputDiagramNodeData.forEach((node, index) =>
{
node.source = networkModelDiagramSrv.imageSourceMap.get(node.SVGFile);
});
I want to achieve this in my application but in the sample angular code it is working. but in my application is not working
Oh, OK, I see now why you are getting that error. You are trying to modify the immutable data. You can do that with the GoJS model data, which for performance and convenience reasons was designed for mutability. But not with your app’s state/data. I suppose you could put your inspector code inside the component that shows the diagram and have the it modify some model data. Or you could make sure to copy the information when changing its values.
I am using the same structure and sending the data from the inspector to the app component and tring to set the record but it is failing
can you provide me some sample which will help me?
Have you seen the samples in GitHub - NorthwoodsSoftware/gojs-react-samples: A handful of projects demonstrating usage of GoJS and React together ? That includes some usage of the GoJS Data Inspector.
Can you provide me the angular sample?
It seems like you’ve already found gojs-angular-basic. You need to make sure all your state updates are happening within calls to produce, as that sample does. It looks like you are trying to update state without using produce in some cases. As Walter said, you need to ensure immutability, which is why we use immer in that sample since it greatly simplifies immutable updates.