Тип «строка» не может быть назначен типу keyof [Type]
Я надеюсь, что кто-то может помочь с этим. Я новичок в мире реагирования на машинописные тексты, и я написал дочерний компонент Textarea, который принимает функцию в качестве реквизита onChange. Затем эта функция вызывается с двумя строками в качестве аргументов из дочернего компонента.
В родительском компоненте я более конкретно знаю, как должен выглядеть второй аргумент этого вызова функции (keyof Type). Проблема в том, что машинописный текст говорит мне, что строка типа не может быть назначена типу [вставить строки ключей типа].
Я думаю, что это должно быть решено с помощью дженериков? но я просто не могу уложить это в голове.
Я попробовал этот как вы можете выразить «keyof T» как подмножество String?, но ошибка не исчезла.
Код Barebones можно найти здесь: https://codesandbox.io/s/modest-dhawan-v3z2y В этом примере первая и третья Textarea не должны выдавать никаких ошибок, так как второй аргумент будет ключом из указанного типа. То
Как я могу это решить?
Я хотел бы, чтобы оба компонента Textarea в index.tsx не выдавали никаких ошибок типа, еще раз я думаю, что дженерики могут быть решением, но я не могу понять это.
Спасибо заранее.
Проверь это. codeandbox.io/s/quizzical-darkness-79eux
Не могу поверить, что я сам этого не понял. Это очень просто. Это решает проблему, большое спасибо.
Не беспокойтесь, я просто продвинул это в ответ, чтобы получить некоторые из этих сочных кармических штучек репутации.
Ответы 1
Нет необходимости ни в дженериках, ни во втором аргументе. Поскольку вы передаете значение этого аргумента в качестве реквизита, это предполагает, что вы уже знаете, какое значение будет в родительском компоненте. Вы можете передать лямбду или связанную функцию с уже установленным именем.
<TextArea
id = "ErrorDescription"
name = "ErrorDescription"
className = "form-control"
isRequired
value = {inputValues.ErrorDescription}
onChange = {(value) => updateValue(value, 'ErrorDescription')}
/>
Или
// Note I had to swap the order of parameters to facilitate binding
const updateValue = (eventtargetname: keyof InputValues, eventvalue: string) => ...
const updateErrorValue = updateValue.bind(this, 'ErrorDescription')
return (
...
<TextArea
id = "ErrorDescription"
name = "ErrorDescription"
className = "form-control"
isRequired
value = {inputValues.ErrorDescription}
onChange = {updateErrorValue}
/>
)
Лично я бы выбрал лямбды, так как они намного чище. Связанные функции работают лучше в компонентах класса, когда используются вне функции рендеринга, но это больше невозможно с парадигмой функций и хуков.
Рабочий пример. https://codesandbox.io/s/quizzical-darkness-79eux
Нет необходимости ни в дженериках, ни во втором аргументе. Поскольку вы передаете значение этого аргумента в качестве реквизита, это предполагает, что вы уже знаете, какое значение будет в родительском компоненте.