[英]TypeScript: Object is possibly 'null'
我正在嘗試將 React 項目轉換為 TypeScript。 下面的代碼是一個輸入字段,用於計算正在輸入的字符數。
在 renderCharactersLeft 函數中,我收到以下錯誤:
由於默認狀態 'charsLeft' 設置為 null,這並不讓我感到驚訝,但我想知道您將如何在 TypeScript 中繞過或解決此消息?
import React from "react";
interface CharCountInputProps {
value: string;
type: string;
name: string;
maxChars: number;
onChange: any;
}
interface CharCountInputState {}
class CharCountInput extends React.Component<
CharCountInputProps,
CharCountInputState
> {
state = {
charsLeft: null
};
componentDidMount() {
this.handleCharCount(this.props.value);
}
handleCharCount = (value: string) => {
console.log(value);
const { maxChars } = this.props;
const charCount = value.length;
const charsLeft = maxChars - charCount;
this.setState({ charsLeft });
};
changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
this.setState({ [event.target.name]: event.target.value } as Pick<
CharCountInputState,
keyof CharCountInputState
>);
this.handleCharCount(event.target.value);
this.props.onChange(event);
};
renderCharactersLeft = () => {
const { charsLeft } = this.state;
let content;
if (charsLeft >= 0) {
content = <span>{`characters left: ${charsLeft}`}</span>;
} else if (charsLeft != null && charsLeft < 0) {
const string = charsLeft.toString().substring(1);
content = <span>{`too many characters: ${string}`}</span>;
} else {
content = null;
}
return content;
};
render() {
const { value, type, name } = this.props;
return (
<>
<input
onChange={this.changeHandler}
value={value}
type={type}
name={name}
/>
{this.renderCharactersLeft()}
</>
);
}
}
export default CharCountInput;
您可以像這樣在 if 語句中添加一個空檢查:
if (charsLeft !== null && charsLeft >= 0) {
或者將 charsLeft 的初始狀態設置為 null 以外的值(例如道具中的 maxChars)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.