我正在使用react-select和redux形式进行自动完成。有一个名为listings_of
的字段,它是我需要发布到服务器的数据数组。为此,我使用了FieldArray概念。我获得的数据不是使用react-select期望的值和标签格式,因此我必须使用getOptionLabel
和getOptionValue
道具。为此,我采用以下方式
const renderListingsOf = ({
fields,
data,
meta: { touched, error, submitFailed }
}) => {
return (
<ul>
<li>
<button type="button" onClick={() => fields.push({})}>
Add Member
</button>
</li>
{fields.map((listing, index) => (
<li key={index}>
<button
type="button"
title="Remove Member"
onClick={() => fields.remove(index)}
/>
<Field
name={`${listing}`}
component={InputTextWithSearch}
placeholder="Search..."
options={(data && data.users.data) || []}
getOptionLabel={option =>
!isEmptyObject(option) && option.personal.first_name
}
getOptionValue={option => {
if(!isEmptyObject(option)) {
return {
_id : option._id,
first_name: option.personal.first_name,
last_name : option.personal.last_name
};
}
}}
/>
</li>
))}
</ul>
);
};
<Column>
<Query
query={GET_USERS}
variables={{
param: {
limit: 10
}
}}
>
{({ loading, data }) => {
if(loading)return 'loading...';
return (
<InputFieldWrapper styling={styling} label="Listings of">
<FieldArray
name="general.general_information.listings_of"
component={renderListingsOf}
data={data}
/>
</InputFieldWrapper>
);
}}
</Query>
</Column>
data.users.data具有以下对象
[
{
_id: 'sdfskfjsdkjfsd',
personal: {
first_name: 'hello',
last_name: 'hy'
}
},
{
_id: 'sdjfkjfdkjskfdjkfff',
personal: {
first_name: 'hello1',
last_name: 'hy1'
}
},
]
但是在提交general.general_information.listings_of的值时,应该是如下所示的对象数组
general: {
general_information: {
listings_of: [
{
_id: 'sdfskfjsdkjfsd',
first_name: 'hello',
last_name: 'hy'
}
]
}
}
因此,我尝试从getOptionValue返回以下对象,但此方法不起作用
general: {
general_information: {
listings_of: [
{
_id: 'sdfskfjsdkjfsd',
personal: {
first_name: 'hello',
last_name: 'hy'
}
}
]
}
}