对象可能是下拉组件中未定义的反应打字稿

Question

我正在创建一个下拉组件，但 typescript 在 options.map 和 selectedOption.title 案例中抛出了几个错误：

import React, { useRef,useState, useEffect } from "react";
import useToggle from '../hooks/useToggle';
import  useDetectOutsideClick  from '../hooks/useOutsideClick';

import "./select.scss";
interface TProduct {
    title?: string;
    options?: [];
    getDropDownValue?: any;
  }

  interface TOption {
    title?: string;
    value?: string;
    id?: any;
  }

const Select = (props: TProduct) => {
    let { title, options, getDropDownValue } = props;
    const dropdownRef = useRef(null);
    const [visibility, setVisibility] =  useDetectOutsideClick(dropdownRef, false);
      const [selectedOption, setSelectedOption] = useState<TOption>({});
  
      return (
          
              <div
          className="base-select"
          ref={dropdownRef}
                  onClick={e =>  {
                      setVisibility(!visibility);
                  
                  }}
              >
                  <div className="selected-option">
                      <span
                          title={
                              selectedOption === ""
                                  ? title
                                  : selectedOption.title
                          }
                      >
                          {selectedOption === ""
                              ? title
                              : selectedOption.title.length <= 20
                              ? selectedOption.title
                              : selectedOption && selectedOption.title  && `${selectedOption.title.slice(0, 20)}`}
                      </span>
                      
                  </div>
                  {visibility && (
                      <div className="options">
                          <ul>
                      
                              {options
                                  .map((option) => (
                                      <li
                                          key={index}
                                          className={
                                             selectedOption && selectedOption ===       option
                                                  ? "active-option"
                                                  : ''
                                          }
                                          onClick={() => {
                        setSelectedOption(option);
                        getDropDownValue(option);
                       
                      }
                                          }
                                      >
                                          {option.title}
                                      </li>
                                  ))}
                          </ul>
                      </div>
                  )}
              </div>
      );
     };

    export default Select

所以列表项和标题的循环都会抛出选项类型和 selectedOptions.title 类型的错误 Object is possible undefined

出了什么问题，如何解决？

Answer 1

可以通过使用 TS 中的 ? 运算符安全地键入您的 option 和 selectedOption 并将 index 添加到您的 options.map 回调函数中来修复。

<div
    className="base-select"
    ref={dropdownRef}
    onClick={e =>  {
      setVisibility(!visibility);
    }}
  >
    <div className="selected-option">
      <span
        title={
          selectedOption === ""
            ? title
            : selectedOption?.title
        }
      >
        {selectedOption === ""
          ? title
          : selectedOption?.title?.length <= 20
            ? selectedOption?.title
            : selectedOption?.title && `${selectedOption?.title?.slice(0, 20)}`}
      </span>

    </div>
    {visibility && (
      <div className="options">
        <ul>
          {options
            .map((option, index) => (
              <li
                key={index}
                className={
                  selectedOption?.id === option?.id
                    ? "active-option"
                    : ""
                }
                onClick={() => {
                  setSelectedOption(option);
                  getDropDownValue(option);
                }}
              >
                {option?.title}
              </li>
            ))}
        </ul>
      </div>
    )}
  </div>

我强烈建议严格键入您正在创建的任何 react 组件的 props，TS 在这里最有用。

例如：

type CustomSelectProps = {
  options?: Array<TOption>;
  title?: string;
  getDropDownValue?: (option: TOption) => void;
}
const Select: React.FC<CustomSelectProps> = (props) => {
  // ...component content...
}