react-admin
react-admin copied to clipboard
marmelab
Infinite loop if initialValue is defined in a SelectArrayInput which is integrated in a formdataconsumer
What you were expecting: Defined initial values for SelectArrayInput in a FormDataConsumer and have a working environment
What happened instead: An infinite loop take place and stop application.
Steps to reproduce:
- Go to https://codesandbox.io/s/sweet-darkness-15q1m?file=/src/posts.js:1446-1462
- Open your browser inspector
- Go in the integrated browser to post/create
- You should see "Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render." in the console
- Choose nom 2 in the first select
- You should see an infinite loop and real browser (firefox at least) ask to stop the process
Related code:
- Go to https://codesandbox.io/s/sweet-darkness-15q1m?file=/src/posts.js:1446-1462
<SimpleForm>
<FormDataConsumer>
{({ formData, ...rest }) => {
return (
<SelectArrayInput
label="User"
source="userId"
initialValue={[1]}
choices={[
{ id: 1, name: "nom1" },
{ id: 2, name: "nom2" },
{ id: 3, name: "nom3" },
{ id: 4, name: "nom4" }
]}
>
<ChipField source="name" />
</SelectArrayInput>
);
}}
</FormDataConsumer>
{/*...*/}
</SimpleForm>
Other information:
Environment
- React-admin version: 3.10.2
- React version: 17.0.1
- Browser: firefox & chrome tested
- Stack trace (in case of a JS error):
I've tested you code, and fix it, this is working
<Create {...props}>
<SimpleForm>
<SelectArrayInput
label="User"
source="userId"
initialValue={[1]}
choices={[
{ id: 1, name: "nom1" },
{ id: 2, name: "nom2" },
{ id: 3, name: "nom3" },
{ id: 4, name: "nom4" }
]}
>
<FormDataConsumer>
{({ getSource, ...rest }) => <ChipField source={getSource("name")} />}
</FormDataConsumer>
</SelectArrayInput>
<TextInput source="title" />
<TextInput multiline source="body" />
</SimpleForm>
</Create>
See here https://codesandbox.io/s/condescending-hopper-31heb?file=/src/posts.js
Hi @etienne-bondot, the fix proposed does not seems to work when you do need to have the SelectArrayInput as a child of a FormDataConsumer, e.g:
<SimpleForm>
<FormDataConsumer>
{({ formData, ...rest }) => {
formData.someValue ? <SelectArrayInput
label="User"
source="userId"
initialValue={[1]}
choices={[
{ id: 1, name: "nom1" },
{ id: 2, name: "nom2" },
{ id: 3, name: "nom3" },
{ id: 4, name: "nom4" }
]}
/>
: null // or some other stuff
}}
</FormDataConsumer>
{/*...*/}
</SimpleForm>
The browser will crash as described by @nicodmf, only happens when the initialValue is assigned to that Input.
@pflima92 Thank you for pointing out the initialValue part, It saved my day :)
