Question

我已经搜索了一段时间，并且在网络上发现了类似的问题，但是这些解决方案似乎都不适合我。

我第一次在我的react proj中使用打字稿，但出现错误：

Object is possibly 'undefined'

我一直在尝试解决此问题，但到目前为止尚未找到任何解决方案。

这是我的代码（在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>
      </>
   )}

   ...
)

这是接口，我在其中声明了questions属性为可选：

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

如何解决此问题？

Answer 1

TypeScript抱怨的原因是，它很难检测到您之前已经进行了空检查。一种告诉TS您确定该属性将存在的方法是使用非null断言运算符（！）：

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>
      </>
   )}

   ...
)

或者您也可以按照他人的建议进行操作并复制null检查：

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

使用类型脚本的reactjs中的“对象可能是'未定义'的”

1 个答案: