Object 可能是下拉组件中未定义的 react typescript
Object is possibly undefined react typescript in the dropdown component
我正在创建一个下拉组件,但是打字稿在 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 可能未定义
出了什么问题,如何解决?
可以通过使用 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...
}
我正在创建一个下拉组件,但是打字稿在 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 可能未定义
出了什么问题,如何解决?
可以通过使用 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...
}