Question

我正在使用Typescript编写React应用程序，并且在我的渲染方法中出现此错误：

Object is possibly null

问题是我已经在检查对象是否不为null。这是我的代码：

interface State {
  tutorial: any;
}

export default class Tutorial extends PureComponent<any, State> {
  state = {
    tutorial: null,
  };

  componentDidMount() {
    loadTutorial(this.props.match.params.id).then((res: any) => {
      this.setState({ tutorial: res.tutorial });
    });
  }

  render() {
    if (this.state.tutorial === null) return null;

    return (
      <section>
        <h1>Tutorial: {this.state.tutorial.title}</h1>;
      </section>
    );
  }
}

但是我在render方法中仍然有错误。我该怎么解决？

Answer 1

奇数错误。似乎与以下事实有关：在初始化state时没有类型注释，并且将tutorial设置为null：

state = {
  tutorial: null,
};

换句话说，TypeScript认为state的类型实际上是{ tutorial: null }，因此您不能缩小null。但是，我希望它会缩小到never，这就是为什么我认为错误消息很奇怪。

将此更改为：

state: Readonly<State> = {
  tutorial: null,
};

还有your code works。（启用strictNullChecks进行验证。）

即使React type definitions say state: Readonly<S>我发现要获得正确的行为，您通常也必须显式注释state属性，否则TypeScript将从初始化值中推断类型，而这可能不是与传递给组件的S类型arg相同。

打字稿：React中的if后对象可能为null事件

1 个答案: