I have a form that needs to retrieve the value of a field from my backend. It seems to retrieve the value successfully, but it does not update the value in the form.
How I use props.change to try to update field "foo":
const asyncValidate = (values, dispatch, props) => {
return axios
.get(URL)
.then( (response) => {
var whyNoChange = props.change("foo", response.data.foo)
console.log(whyNoChange)
});
}
Foo component:
const fooField = (props) => (
<Form.Field
error={props.meta.touched && props.meta.error ? true : false}>
<Input
placeholder='Change me'
onBlur={props.input.onBlur}
onFocus={props.input.onFocus}
onChange={(param, data) => props.input.onChange(data.value)}
value={props.input.value}
/>
{
props.meta.touched &&
props.meta.error &&
<span style={{color: '#9f3a38'}}>
{props.meta.error}
</span>
}
</Form.Field>
)
My form:
class MyForm extends Component {
// ...
render () {
return (
<Form>
<Field
name='foo'
component={fooField}
/>
</Form>
)
}}
MyForm = reduxForm({
form: 'myform',
validate,
asyncValidate
})(MyForm)
And finally what the console logs when it dispatches redux-form/change ...
{…}
>meta: Object { form: "myform", field: "foo", touch: false, … }
payload: "foo-from-backend"
type: "@@redux-form/CHANGE"
But my foo-field value doesn't get updated. I checked the react developer tools and the value is just "". I followed the change directions as per the documentation. Any advice on where to go from here would be greatly appreciated. I am new to react and redux-form.
First of all, you have to dispatch it. Secondly, you are assigning a void
function to a variable without calling it. Lastly, I believe that change
accepts three arguments - form name
, field name
and value
.
const asyncValidate = (values, dispatch, props) => {
return axios
.get(URL)
.then( (response) => {
dispatch(change("form name", "foo", response.data.foo))
});
}