我正在使用react-select和Formik。我有以下问题:
我以响应选择希望的方式(label
,value
对)映射来自API的响应。可以正常工作。但是之后,formik希望将所选值以字符串格式发送。
我收到此错误:checkPropTypes.js:19 Warning: Failed prop type: Invalid prop
values.group of type
对象supplied to
AddEditUser , expected
字符串.
因此,尽管我会得到响应,但在onChangeCallback上将应用JSON.Stringify()
。但是对于onChangeCallback
道具,我正在使用Formik的onChange
道具。
代码:
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" />
但是我对react-selct,formik和我自己的函数之间的实际实现有些困惑。