Я использую реагировать на выбор и Формик в моей форме. У меня есть следующая проблема:
Я отображаю ответ от API, так, как его хочет реакция-выбор (label
, value
пары). Это работает правильно. Но затем formik, хотите, чтобы выбранное значение было отправлено в строковом формате.
Я получаю эту ошибку: checkPropTypes.js:19 Warning: Failed prop type: Invalid prop
values.group of type
объект supplied to
AddEditUser , expected
строка .
Итак, я думаю, что я получу ответ и на onChangeCallback, применю JSON.Stringify()
. Но для опоры onChangeCallback
я использую опору onChange
от Formik.
Код:
state = {
type: 'password',
groups: []
};
componentDidMount() {
this.fetchListGroups();
}
fetchListGroups = () => {
listGroups().then(({ data }) => {
this.setState({ groups: data });
});
};
mapListGroupToSelect = () => {
const { groups } = this.state;
return groups.map(group => ({
label: group.name,
value: group.name
}));
};
convertGroupsOjectToString = () => {
const { groups } = this.state;
// This is the function I want to user to convert the selected groups object to string.
};
//Inside the render method
//After the return
<Select
placeholder="Select a Group (Just One)"
onChangeCallback={handleChange}
type="simpleSelect"
options={groups}
isMulti={false}
id="group"
onChange={options => setFieldValue('group', options)}
/>
{JSON.stringify(groups, null, 2)}
{JSON.stringify(typeof groups, null, 2)}
<ErrorMessage name="group" component="div" className="text-danger" />
Но я немного застрял на фактической реализации между response-selct, formik и моей собственной функцией.