TypeError:添加接口以解决Readonly属性错误时，无法读取null的属性

Question

我有这个：

interface State {
backgroundColor: boolean;
isLoading: boolean;
errorOccured: boolean;
acknowledgment: string;
}
export class GoodIntention extends React.Component<Props, State> {
...
onClickOfAgreement = (policy: string) => () => {
this.setState({backgroundColor: true});
...
}

render() {
return(
...
<table className={'checkbox-table ' + this.state.backgroundColor}>
<label>
<input className="checkbox-round" type="checkbox" onClick={this.onClickOfAgreement(policy)}/>
&nbsp;&nbsp; Agree and access my certificate and disc
</label>
</table>
...
}

当我运行应用程序时，浏览器会出现以下错误：

TypeError:无法读取null的属性(读取"backgroundColor"(

行<table className={'checkbox-table ' + this.state.backgroundColor}>。

我添加了State接口来解决基于此的Property 'backgroundColor' does not exist on type 'Readonly<{}>'错误。不过我好像错过了什么。有人能告诉我那是什么吗？

Answer 1

setState位于onClickOfAgreement函数中。backgroundColor直到用户第一次单击时才存在。