We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Formik values are not updated after React setData() hook call.
setData()
const INITIAL_VALUES = { users: [ { value: 'admin' } ] }; const CreateUsersHooks = ({ httpClient }) => { const [ data, setData ] = useState(INITIAL_VALUES); useEffect(() => { const fetchUsers = async () => { const result = await httpClient.get(`${ROUTE_PATH.DOC}/${DOC_ID}`); console.log('useEffect - setData', usersToFormik(result.data.doc)); setData(usersToFormik(result.data.doc)); }; fetchUsers(); }, []); console.log('initialValues', data); return ( <div style={{ padding: '25px 50px' }}> <Formik initialValues={data} onSubmit={onSubmit} validateOnChange={false} render={({ values }) => { console.log('values.users', values.users); return ( <Users users={values.users} /> ); }} /> </div> ); };
In the browser console I see the following log output:
inititialValues > { users: [ { value: 'admin' } ] } values.users > { users: [ { value: 'admin' } ] } useEffect - setData > { id: '123', users: [ { value: 'trex' }, { value: 'velociraptor' } ] } inititialValues > { id: '123', users: [ { value: 'trex' }, { value: 'velociraptor' } ] } values.users > { users: [ { value: 'admin' } ] }
I expected to see the following log in the console (the last line is different)
inititialValues > { users: [ { value: 'admin' } ] } values.users > { users: [ { value: 'admin' } ] } useEffect - setData > { id: '123', users: [ { value: 'trex' }, { value: 'velociraptor' } ] } inititialValues > { id: '123', users: [ { value: 'trex' }, { value: 'velociraptor' } ] } values.users > { id: '123', users: [ { value: 'trex' }, { value: 'velociraptor' } ] }
The text was updated successfully, but these errors were encountered:
I put the code in codesandbox https://codesandbox.io/s/y2o6w9vk79?fontsize=14 See the log in the browser console
data before return > { users: [ { value: 'admin' } ] } render - values > { users: [ { value: 'admin' } ] } data before return > { id: '123', users: [ { value: 'trex' }, { value: 'velociraptor' } ] } render - values > { users: [ { value: 'admin' } ] }
Expected
data before return > { users: [ { value: 'admin' } ] } render - values > { users: [ { value: 'admin' } ] } data before return > { id: '123', users: [ { value: 'trex' }, { value: 'velociraptor' } ] } render - values > { id: '123', users: [ { value: 'trex' }, { value: 'velociraptor' } ] }
Sorry, something went wrong.
My bad, I have to set enableReinitialize={true} in Formik
enableReinitialize={true}
Formik
No branches or pull requests
馃悰 Bug report
Current Behavior
Formik values are not updated after React
setData()
hook call.In the browser console I see the following log output:
Expected behavior
I expected to see the following log in the console (the last line is different)
Your environment
The text was updated successfully, but these errors were encountered: