如何从反应最终形式更改/格式化道具输入中的值

Question

在编辑表单中，我的API返回一个ID数组，[ 1, 2 ]在输入中显示广告商，我使用react-select进行自动完成，但react-select需要：[{label: 'foo', value: 1}, {label: 'bar', value: 2}]。

我通过获取获取组件中的标签，我想知道如何更改react-final-form中的值以获得正确的格式。

这是我的编辑表单：

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;

Answer 1

如果你传递一个options道具，它就会像placeholder和isMulti一样传递给CustomAutoCompleteInput。似乎你可以通过options={formatedAdvertisers}.