Объект машинописного текста, возможно, не определен при поиске объектов внутри массива

#javascript #reactjs #typescript

Вопрос:

Ошибки машинописи как ошибка, когда вы приписываете значение переменной, и это значение, возможно, не определено. Обычно это можно обойти, вставив ! после передаваемого значения или с помощью простого if оператора. Проблема в том, что первое не работает для меня, и использование последнего приведет к тому, что я добавлю ненужное количество дополнительных строк в свой код. Сценарий выглядит следующим образом:

У меня есть этот интерфейс. Я использую его массив в качестве состояния компонента:

 interface IFormFields {
    name: string; isValid: boolean; content: string; isUnchanged: boolean; tip: string
}

...

const [requiredFields, setRequiredFields] = useState<Array<IFormFields>>([]);
 

А позже я хочу, чтобы requiredFields объекты использовали свои значения. Я хочу сделать это, используя find метод JavaScript в одной строке:

 requiredFields.find(field => field.name === "Nome")
 

Эта строка вызывает ошибку, так как «поле» может быть неопределенным. В этом случае оператор K вызывает еще одну ошибку

 requiredFields.find(field! => field.name === "Nome")
//"Cannot find name 'field'.ts(2304)"
 

И использование if предложений вызовет, как я уже сказал, огромное количество ненужных строк кода, потому requiredFields что внутри него может быть n объектов. Есть какие-нибудь обходные пути для этого?

Комментарии:

1. Я не могу воспроизвести это на детской площадке. Вы в состоянии это сделать? typescriptlang.org/play? #код/…

2. Я также не могу воспроизвести это в поле кода машинописи/реакции: codesandbox.io/s/silly-black-g4tsy?file=/src/App.tsx

3. Проблема в том, что find может ничего не найти, если вы уверены, что он будет использоваться ! в конце вызова метода requiredFields.find(field => field.name === "Nome")!

4. @NadiaChibrikova вы правы. Я только что обновил этот раздел рабочим фрагментом Никса: typescriptlang.org/play? #код/…

5. О, это на самом деле не согласуется с ошибкой, которую вы опубликовали в вопросе, хотя?

Ответ №1:

Если вы хотите использовать ! оператор, вам нужно сделать это в том месте, где вы получаете доступ к его свойствам, т. е.

 requiredFields.find(field => field!.name === "Nome")
 

Однако я бы рекомендовал вам ? вместо этого использовать оператор; таким образом, если field он окажется неопределенным, вы не получите ошибку во время выполнения:

 requiredFields.find(field => field?.name === "Nome")
 

Короче говоря, field!.name просто сообщает компилятору, что, как вы знаете field , определено, в то field?.name время как автоматически вводит null / undefined проверяет для вас (таким образом, избегая беспорядка кода).