javascript - "Objekt er muligens 'undefined'" i reactjs med typescript

Jeg har lett en stund, og funnet lignende problemer på nettet, men ingen av løsningene ser ut til å fungere for meg.

Jeg bruker TypeScript i React-prosjektet mitt for aller første gang, og jeg får en feil:

Object is possibly 'undefined'

Jeg har prøvd å finne ut hvordan jeg kan fikse dette, men har ikke funnet noen løsninger så langt.

Her er koden min (inne i en funksjonell komponent i ReactJS):

return(
   ...

   {questions[currentStep].type === 'select' && 
   questions[currentStep].options && (
      <>
         <select id="question" onChange={submitForm} autoFocus required>
            <option value="" />

            {questions[currentStep].options.map(question => {
               <option>{question}</option>;
            })}
         </select>
         <label htmlFor="question">{questions[currentStep].text}}</label>
      </>
   )}

   ...
)

Og dette er grensesnittet, hvor jeg har erklært questions-attributtet som valgfritt:

interface Question {
  ...
  options?: string[];
  ...
}

Hvordan kan jeg muligens fikse dette problemet?

Svar #1

Grunnen til at TypeScript klager er fordi det har problemer med å oppdage at du allerede har gjort en null-sjekk tidligere. En måte å fortelle TS at du er sikker på at egenskapen vil eksistere, er å bruke operatoren for ikke-null påstand (!):

return(
   ...

   {questions[currentStep].type === 'select' && 
   questions[currentStep].options && (
      <>
         <select id="question" onChange={submitForm} autoFocus required>
            <option value="" />

            {questions[currentStep].options!.map(question => {
               <option>{question}</option>;
            })}
         </select>
         <label htmlFor="question">{questions[currentStep].text}}</label>
      </>
   )}

   ...
)

eller du kan også gjøre som andre foreslo og replikere null-sjekken:

{questions[currentStep].options && questions[currentStep].options!.map(question => {
               <option>{question}</option>;
            })}

Relaterte artikler