This is my search.jsx Component
const Search = ({
input,
isFetching,
isSelected,
message,
options,
handleSearch,
handleChange,
handleSave,
handleCancel,
}) => (
<Container>
<StyledDropdown
fluid
selection
placeholder="Search Name/Email"
onChange={handleChange}
onSearchChange={handleSearch}
options={options}
search={options => options}
loading={isFetching}
noResultsMessage={message}
selectOnNavigation={false}
/>
<Buttons>
<Button type="button" content="Save" primary onClick={handleSave} disabled={!isSelected} />
<Button type="button" content="Cancel" onClick={handleCancel} />
</Buttons>
</Container>
);```
This is my search container, The form throws an error[](https://i.sstatic.net/Z1HkAOmS.png)everytime I click Save and the HandleSave Function is triggered.
This is the handleSave method in the search.jsx container. The form Works fine if I remove the input.onChange() (but author_id is not added to the request payload since I removed that part, Obviously!)
handleSave = () => {
this.props.input.onChange(this.state.value); //-> throws function passed to reduxForm must return a promise
this.props.setSelected(this.getSelectedData());
this.props.toggleEditMode();
}“`
this is the parent container (author_selector.jsx) where search.jsx is called. Even here the input.onChange throws the same error!
class AuthorSelectorContainer extends Component {
static propTypes = {
isEditing: bool.isRequired,
fetchAuthor: func.isRequired,
setSelected: func.isRequired,
...
};
componentDidMount() {
const {
meta, input, fetchAuthor, setSelected, defaultUserData,
} = this.props;
if (meta.initial) {
fetchAuthor(meta.initial);
} else {
setSelected(defaultUserData);
//input.onChange(defaultUserData.id); //-> throws function passed to reduxForm must return a promise
}
}
render() {
const { meta: { initial }, selected, isEditing } = this.props;
const readOnly = (initial !== undefined);
if (isEditing) {
return <Search {...this.props} />;
} else if (selected) {
return <AuthorSelectorForm {...this.props} readOnly={readOnly} />;
}
return null;
}
}
const mapStateToProps = state => ({
selected: getSelected(state),
isEditing: isEditing(state),
defaultUserData: getUserData(state),
});
This is my middleware.js ( I can’t see why validation is triggered)
const apiMiddleware = store => next => async (action) => {
const { type, payload } = action;
const { getState, dispatch } = store;
if (!type.startsWith('API/')) {
return next(action);
}
const state = getState();
const access_token = getToken(state);
if (access_token && payload.url !== '/oauth/token') {
payload.params = { access_token, ...payload.params };
}
const config = {
baseURL: getBaseURL(state),
...payload,
};
// pass action to next middlewear. mostly for showing the dispatch on devTool
next(action);
try {
const res = await axios(config);
return res;
} catch (error) {
if (error.response) {
if (error.response.status === 401) {
// Unauthorized
logout()(dispatch);
dispatch(ui.flash.warn({ header: 'Login Expired', content: 'Please login again' }));
}
} else if (error.request) {
dispatch(ui.flash.error({ header: 'Network Failure', content: 'API server not available' }));
} else {
// Something happened in setting up the request that triggered an Error
dispatch(ui.flash.error({ header: 'Error', content: error.message }));
}
throw error;
}
};
I have tried directly updating state without invoking reduxForm (which has some other issues!).
I have also tried bypassing validation which doesn’t work.
const AuthorSelectorForm = reduxForm({
form: 'authorSelectorForm',
validate: undefined,
asyncValidate: undefined,
})(AuthorSelector);
I want to understand how input.onChange() can trigger async Validation error. How should I got about debugging this issue. Thank you for taking a look!
