useController, update value when component mount (e.g useEffect)

[david-hov]

What you were expecting:
Need to change value inside useEffect, transform already gotten value, and have new value to ArrayInput, but not updating.

What happened instead:
not change value inside component

Related code:

export const CustomArrayInput = ({ className, keyLabel, valueLabel, keyName, keySubLabel, valueSubLabel, keyValue, isRequired, keyPlaceholder, valuePlaceholder }: any) => {
const { field }: any = useController({ name: 'headers', rules: { required: 'The field is required' } });

// NEED TO UPDATE ALREADY FETCHED VALUES=> my values are {"a": "b"} need to do [{"headerName": "a", "headerValue" : "b"}]
useEffect(() => {
const newValue: { headerName: string; headerValue: any; }[] = []
Object.keys(field.value).forEach(el => {
newValue.push({ 'headerName': el, 'headerValue': field.value[el] })
});
// NOOOOOOOT UPDATING
field.onChange(newValue)
}, []);

return (
    <ArrayInput className='array-input-select-array' source='headers' label=''>
        <SimpleFormIterator >
            <TextInput
                InputLabelProps={{ shrink: true }}
                placeholder={keyPlaceholder}
                className={className && className}
                onInput={validateOnType}
                variant='outlined'
                validate={isRequired ? required() : undefined}
                fullWidth
                source={keyName}
            />
            <TextInput
                InputLabelProps={{ shrink: true }}
                placeholder={valuePlaceholder}
                className={className && className}
                onInput={validateOnType}
                variant='outlined'
                validate={isRequired ? required() : undefined}
                fullWidth
                source={keyValue}
            />
        </SimpleFormIterator>
    </ArrayInput >
);

Environment

• React-admin version: 4.0.0
• Last version that did not exhibit the issue (if applicable):
• React version: 18.1.0
• Browser:
• Stack trace (in case of a JS error):

[david-hov]

    const formContext = useFormContext();
    const headersValue = formContext.getValues('headers');
    useEffect(() => {
            let transformedArray: { headerName: string; headerValue: any }[] = [];
            Object.keys(headersValue).forEach((el) => {
                transformedArray.push({
                    headerName: el,
                    headerValue: headersValue[el],
                });
            });
            formContext.setValue('headers', transformedArray)
    }, [headersValue && !Array.isArray(headersValue)]);

like this working, but is it good variant of handling problem?
I need to transform after fetch that's the problem

[fzaninotto]

I'm sorry, I don't understand the bug you're describing. Please rephrase for more clarity, and include a link to a codesandbox and a step-by-step reproduction.

[david-hov]

const { field }: any = useController({ name: 'headers', rules: { required: 'The field is required' } });

another explanation. is there any way to tranform fetched values. before giving to component. but not in dataprovider.

[fzaninotto]

Hi, and thanks for your question. As explained in the react-admin contributing guide, we use the GitHub issues for bugs and feature requests only.

For support question ("How To", usage advice, or troubleshooting your own code), you have three options:

• Community support: Ask your question on StackOverFlow. This makes your question easy to find by the developer community. StackOverFlow has great SEO, gamification, voting, and reputation system.
• Community support: Ask your question on Discord. Some react-admin users and contributors might have time to answer your questions.
• Professional support: If you're a React-Admin Enterprise Edition subscriber, you have unlimited access to the Professional Support service. This service guarantees that you'll get an answer shortly. If you're not a subscriber, please consider it! It's a good way to contribute to the sustainability of react-admin.

So I'm closing this issue, and inviting you to ask your question in one of the support channels above.