[英]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.