narrow-beige
narrow-beige6mo ago

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
kapa.ai
kapa.ai6mo ago
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 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 <Controller
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>
);
}; `` 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: ----------------------
kapa.ai
kapa.ai6mo ago
<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below