В форме редактирования мой API возвращает массив идентификаторов [ 1, 2 ]
для отображения рекламодателей во входных данных, я использовал react-select
для автозаполнения, но react-select
нужно: [{label: 'foo', value: 1}, {label: 'bar', value: 2}]
.
Я получаю метки в моем компоненте через выборку, и я хотел бы знать, как изменить значения в react-final-form
, чтобы иметь правильный формат.
Вот моя EditForm:
const AgenciesInputs = ({
getMany,
record,
sourceAdvertisers,
sourceCreatedBy,
sourceIsActive,
sourceName,
translate,
}) => {
const [formatedAdvertisers, setFormatedAdvertisers] = useState([]);
useEffect(() => {
const { advertisers } = record;
getMany(ADVERTISERS, advertisers, ({ payload: { data } }) =>
setFormatedAdvertisers(data.map(({ id, name }) => ({ value: id, label: name }))),
);
}, []);
console.log(formatedAdvertisers);
return (
<Root id="SLM_agenciesInputs">
<TextInput autoFocus label="agencies_name" source={sourceName} validate={required()} />
{!isNilOrEmpty(record) && (
<TextInput
disabled
format={record => (record ? `${record.lastname} ${record.firstname}` : '')}
label="agencies_createdBy"
source={sourceCreatedBy}
/>
)}
<BooleanInput defaultValue label="agencies_isActive" source={sourceIsActive} />
<Field
component={CustomAutoCompleteInput}
id="SLM_avertisersInput"
minLength={1}
name={sourceAdvertisers}
placeholder={translate('agencies_advertisers')}
url={sourceAdvertisers}
validate={required()}
isMulti
/>
</Root>
);
};
export default AgenciesInputs;