Как изменить / отформатировать значение в вводе реквизита из response-final-form

Question

В форме редактирования мой 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;

Answer 1

Если вы передадите options реквизит, он будет передан CustomAutoCompleteInput, как placeholder и isMulti. Похоже, вы могли бы просто передать options={formatedAdvertisers}.