Skip to content
Advertisement

React redux, Uncaught TypeError: Cannot assign to read only property ‘current’ of object ‘#’

I am making a website to modify db data. first, The structure of the component is as follows

JavaScript

When the row component is created,creating the ref of the input component and redux manages it.

JavaScript

Input component only receives ref as forwardRef

JavaScript

And finally, the redux module

JavaScript

The problem area is the delete button. When I press the button, that error comes out. But if don’t add ref to state, no error occurs. or even if I comment out the bottom part, there is no error.

JavaScript

Or comment out the bottom part

JavaScript

I’ve been trying to fix it all day today, but I don’t know what’s wrong. How can I fix it?

Advertisement

Answer

Don’t Store Refs in Redux

What you are attempting to do here violates not one but two of the “Essential” rules of Redux.

  1. Mutation of state

Ref objects are mutable by design. The reference changes by updating the .current property of the ref object, but the object instance stays the same. This violates Redux rules that state must be immutable because the Redux state can be mutated by unrelated React code.

  1. Non-Serializable

All data in your Redux store should be able to be converted to a JSON string and back. Anything that would get lost in that conversion does not belong in Redux. An instance of a DOM element is not serializable.

You need to figure out what raw data is needed to represent your state. Store that data in Redux and use it to generate the correct DOM elements. Storing the DOM in Redux is doing it backwards.

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement