nested naming not fetching data correactly
iam using useForm for my form and my input component looks like this
<Autocomplete
type={FormInputTypeEnum.AUTOCOMPLETE}
name={"lead_datas[0].bank_account_time_type"}
label={""}
fullWidth
options={bankAccountTypes}
{...fieldData}
/>
here name is lead_datas[0].bank_account_time_type as the api response is like this. but the problem is after i edit the form and submit, it when i open again, it is not fetching the new data. after a re-render it works. there is no issue on my componet with direct name i mean without nesting.
<Autocomplete
type={FormInputTypeEnum.AUTOCOMPLETE}
name={"bank_account_time_type"}
label={""}
fullWidth
options={bankAccountTypes}
{...fieldData}
/>
this component works perfectly as the value is not nested in api response
how to fix this
2 Replies
Hi @alfazmuhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the extracts, it seems like you're using the
control={control}
name="category"
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
{...categoryAutocompleteProps}
{...field}
onChange={(, value) => {
field.onChange(value);
}}
getOptionLabel={(item) => {
return (
categoryAutocompleteProps?.options?.find(
(p) =>
p?.id?.toString() ===
item?.id?.toString(),
)?.title ?? ""
);
}}
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() ===
(value?.id ?? value)?.toString()
}
renderInput={(params) => (
<TextField
{...params}
label="Category"
margin="normal"
variant="outlined"
error={!!(errors as any)?.category?.id}
helperText={
(errors as any)?.category?.id?.message
}
required
/>
)}
/>
)}
/>
</Box>
</Edit>
);
};
Autocomplete component from Material UI in your edit page. The Autocomplete component is used in conjunction with the Controller component from react-hook-form in the context of Refine.
The issue you're facing might be related to how you're setting up the Autocomplete component. In the extracts, there's an example of how to set up the Autocomplete component with the Controller:
```jsx
<Controllercontrol={control}
name="category"
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
{...categoryAutocompleteProps}
{...field}
onChange={(, value) => {
field.onChange(value);
}}
getOptionLabel={(item) => {
return (
categoryAutocompleteProps?.options?.find(
(p) =>
p?.id?.toString() ===
item?.id?.toString(),
)?.title ?? ""
);
}}
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() ===
(value?.id ?? value)?.toString()
}
renderInput={(params) => (
<TextField
{...params}
label="Category"
margin="normal"
variant="outlined"
error={!!(errors as any)?.category?.id}
helperText={
(errors as any)?.category?.id?.message
}
required
/>
)}
/>
)}
/>
</Box>
</Edit>
);
};
``
In this example, the name prop of the Controller is set to "category", which corresponds to the field in the form data. In your case, you might need to adjust this to match the nested field name in your form data, i.e., "lead_datas[0].bank_account_time_type".
If you're still facing issues, it might be helpful to check the following:
1. Ensure that the id from useParams() is stable and not changing unexpectedly, causing the form to re-fetch the data.
2. Make sure that the UserEdit component itself is not being unmounted and remounted, which would cause the useForm hook to run again.
3. Check if there's any other part of your code that might be causing the form to re-fetch the data, such as a useEffect` hook with a missing dependency.
For more information, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below