如何更改/格式化從 react-final-form 輸入的 props 中的值

Question

在編輯表單中，我的 API 返回一組 ids [ 1, 2 ]以在輸入中顯示廣告商，我使用react-select來自動完成，但react-select需要： [{label: 'foo', value: 1}, {label: 'bar', value: 2}] 。

我通過 fetch 獲取組件中的標簽，我想知道如何更改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;

Answer 1

如果您傳遞一個options道具，它將像placeholder和isMulti一樣傳遞給CustomAutoCompleteInput 。 似乎您可以只傳遞options={formatedAdvertisers} 。