marmelab / react-admin

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
http://marmelab.com/react-admin
MIT License
24.8k stars 5.23k forks source link

Problem with json type Inputs #4037

Closed wmwart closed 4 years ago

wmwart commented 4 years ago

What you were expecting: Expected to save entered data

What happened instead: Instead, react-admin modifies my input. I created JsonInput, which sends a json object to the input SimpleForm, however, a modified version of it gets into the Data Provider.

Steps to reproduce: 1) Add a json object type input to the data being sent 2) save record

Related code: that's what is sent to the input:

json: {
   "FunctionalGroup": [
      {
         "uaIDref": [
            "2104"
         ],
         "_Name": "Текущие параметры",
         "_ID": "33"
      },
      {
         "uaIDref": [
            "2100"
         ],
         "_Name": "Текущие параметры пониженной точности",
         "_ID": "34"
      }
   ],
   "_Name": "Прибор 1",
   "_ID": "32"
}

that's what came to the server:

json: {
    "FunctionalGroup": [
        {
          "uaIDref": [
            "2104"
          ],
          "_Name": "Текущие параметры",
          "_ID": "33"
        },
        {
          "uaIDref": [
            "2100"
          ],
          "_Name": "Текущие параметры пониженной точности",
          "_ID": "34"
        }
    ],
    "FunctionalGroupIds": "",
    "_Name": "Прибор 1",
    "_ID": "32"
},

after a response from the server with this object, this is what came in the field:

json: {
  FunctionalGroup: [
    {
      uaIDref: [
        '2104'
      ]
    },
    {
      uaIDref: [
        '2100'
      ]
    }
  ],
  FunctionalGroupIds: ''
}

what kind of magic is this?

I did some tests. When I converted the object to a string, the correct json was sent to the server, however, in the field after the server responded, the modified object was displayed again. I found out that the conversion is related to redux.js, but what exactly happens is not understood.

Please give any comments on this. How can I make save json?

fzaninotto commented 4 years ago

Hi, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

So I'm closing this issue, and inviting you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!

wmwart commented 4 years ago

stackoverflow

@fzaninotto, i do not quite agree. How to write your input is described in the documentation, except for the network there is an example of such a field for React-admin v2. I do not ask "How To", I want to understand if this is a React-Admin problem or not.

It seems to me that it is, since code unknown to me converts my json as an embedded resource. I ask for advice so that I can deal with this. Or is it not because of React-admin?

fzaninotto commented 4 years ago

Let's put it otherwise: exploring your source to check if the error is on your side or on the react-admin side is troubleshooting, and we won't help you with that - try stackOverflow. It's your job to demonstrate that it's a react-admin bug by providing a codesandbox isolating the problem in a simple example. If it turns out it is a react-admin bug, then we'll look at it.

wmwart commented 4 years ago

Let's do it your way. But it seems to me that you know what’s the matter, just want to follow some kind of protocol.

Steps to reproduce: 1) Open codesandbox 2) Go to CommentEdit.js 3) Edit code <TextInput source="body"> :

...
<TextInput
    source="body"
    parse={v => JSON.parse(v)}
    format={v => JSON.stringify(v)}
    validate={minLength(10)}
    fullWidth={true}
    multiline={true}
/>
...

4) Open CromeDeveloperTools -> Sources: https://l91qk8j2r7.csb.app/node_modules/ra-ui-materialui/lib/form/SimpleForm.js 5) Set breackpoint on line 61 props.save(finalValues, finalRedirect); 6) In the Body Input enter a value:

{
   "FunctionalGroup": [
      {
         "uaIDref": [
            "2104"
         ],
         "_Name": "Текущие параметры",
         "_ID": "33"
      },
      {
         "uaIDref": [
            "2100"
         ],
         "_Name": "Текущие параметры пониженной точности",
         "_ID": "34"
      }
   ],
   "_Name": "Прибор 1",
   "_ID": "32"
}

7) Press Save 8) Look at the breackpoint, parameter finalValues

My json value is modified. Yes, there will be a data error Yes, I was not able in this example to get that modified json, as in my application

In addition, these are modifications when writing a value, when reading this modified json from the backend, it is modified again and only then it gets displayed

However, if I use Json without ID parameters, everything works fine. But I need an ID because this is a hardware configuration and I do not write it

wmwart commented 4 years ago

@fzaninotto, please make any comment here

fzaninotto commented 4 years ago

Reproduced and confirmed, I'm reopening this and marking it as a bug.