Блог

Я создаю раскрывающийся компонент, но 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 amp;amp; selectedOption.title  amp;amp; `${selectedOption.title.slice(0, 20)}`}
                      </span>
                      
                  </div>
                  {visibility amp;amp; (
                      <div className="options">
                          <ul>
                      
                              {options
                                  .map((option) => (
                                      <li
                                          key={index}
                                          className={
                                             selectedOption amp;amp; selectedOption ===       option
                                                  ? "active-option"
                                                  : ''
                                          }
                                          onClick={() => {
                        setSelectedOption(option);
                        getDropDownValue(option);
                       
                      }
                                          }
                                      >
                                          {option.title}
                                      </li>
                                  ))}
                          </ul>
                      </div>
                  )}
              </div>
      );
     };

    export default Select
 

Таким образом, как зацикливание элементов списка, так и заголовки выдают ошибку для типа опций и выбранных опций.Объект типа заголовка, возможно, не определен

Что не так и как это можно исправить?

Это можно исправить, безопасно набрав свой option и selectedOption с ? оператором из TS и добавив 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 amp;amp; `${selectedOption?.title?.slice(0, 20)}`}
      </span>

    </div>
    {visibility amp;amp; (
      <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, который наиболее удобен здесь.

например:

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