Как правильно использовать дженерик в компоненте?

Question

[Евгений Журов]

Есть компонент, который должен работать с произвольным Map. Я пробовал сделать так:

type FormProps<T> = {
  onSubmit: (payload: T) => void
}

const Form = <T,>({onSubmit}: FormProps<T>) => {
  const [formData, setFormData] = useState<T>(new Map())

  const formSubmit = (e: FormEvent) => {
    e.preventDefault()
    onSubmit(formData)
  }
}

Но в строке

const [formData, setFormData] = useState<T>(new Map())

линтер ругается на new Map() в useState - (Argument of type 'Map' is not assignable to parameter of type 'T | (() => T)'.)

Пробовал также в таком духе:

const Form = <T extends Map<string, string>>({onSubmit}: FormProps<T>)

Но всё равно ругается. Как тут надо правильно поступить? T - всегда будет Map, но сами наборы полей будут разные.
Кроме того, не понимаю, как указать тип дженерика при монтировании в родительском компоненте.

<Form onSubmit={(payload) => registration(payload)}/>

Где именно и как именно тут нужно указать конкретный тип?

Update. Пока сделал вот так, но какое-то кривоватое, наверное, решение

const Form = <T extends Map<string, string>>({onSubmit}: FormProps<T>) => {
  const [formData, setFormData] = useState<T>(new Map() as T)
}

Теперь и в операциях присвоения значения приходится писать этот as:

<input
     type={value.type}
     placeholder={schema.locales.ru[key]}
     onInput={(event: FormEvent<HTMLInputElement>) => {
          setFormData(new Map(formData.set(key, event.currentTarget.value)) as T)
     }}
/>

Может, можно как-то поизящней?

Comments

[WbICHA]

Кроме того, не понимаю, как указать тип дженерика при монтировании в родительском компоненте.

<Form<SomeType> onSubmit={(payload) => registration(payload)}/>

[Евгений Журов]

WbICHA, ага, благодарю!

[WbICHA]

Евгений Журов, что касается основного вопроса, то юзСтейт не принимает мап, потому что ты не можешь сделать этот мап ничем иным, кроме Map<any, any>, а в дженерике может быть передан, к примеру, Map<string, string>.
Можно сделать так:

const Form = <T extends Map<unknown, unknown>>({onSubmit}: FormProps<T>) => {
  const [formData, setFormData] = useState<T>(new Map() as T)

Но, по факту, внутри этого компонента у тебя будет нетипизированный мап, так что учитывай это.

[Евгений Журов]

WbICHA, то есть разумнее было бы обойтись обычным объектом вместо Map? Или, может, useReducer можно заставить понимать Map?

В принципе, этот Map всегда будет string, string так или иначе. На уровне самого компонента этого было бы более чем достаточно. Тут мне скорее важно знать тип на уровне родителя.

[WbICHA]

Евгений Журов, если он всегда будет стринг + стринг, то для чего тут вообще мап?