Question

我知道，避免在未安装的组件上调用.setState()的常见模式是通过添加诸如_isMounted之类的私有属性来跟踪它，如blog中所述。

我一直在使用这种方法：

class Hello extends React.PureComponent{
_isMounted = false;

constructor(props) {
    super(props);
    this.state = {
        // ...
    };
}

componentDidMount() {
    this._isMounted = true;
}

componentWillUnmount() {
    this._isMounted = false;
}
// ...
}

在我开始使用TypeScript之前，一切都很好。我尝试以相同的方式执行此操作：

class Hello extends React.PureComponent<Props, State> {
private _isMounted: boolean;

constructor(props: Props) {
    super(props);
    this.state = {
        // ...
    };
}

componentDidMount() {
    this._isMounted = true;
}

componentWillUnmount() {
    this._isMounted = false;
}
}

但是它总是会引发类型错误：

TypeError: Cannot set property _isMounted of #<Component> which has only a getter

就目前而言，我知道的唯一解决方案是为其显式编写一个setter。但是我真的不明白这是否是预期的方法。 TypeScript不会自动生成getter和setter吗？

已更新：
一个codesandbox示例：https://codesandbox.io/s/l59wnqy5zz

Answer 1

这可能对其他开发人员有用
使用吸气剂和吸气剂

class Hello extends React.Component {
    private isFullyMounted: boolean = false;

    public componentDidMount() {
        this.isMounted = true;
    }

    public componentWillUnmount() {
        this.isMounted = false;
    }

    public set isMounted(status: boolean) {
        this.isFullyMounted = status;
    }

    public get isMounted() {
        return this.isFullyMounted;
    }
}

Answer 2

不知何故，这就是名字，对我来说 _isMounted 实际上有效但不是 isMounted。

<块引用>

@Stramski 指出，我认为 _isMounted 是 React.Component 的私有属性。重命名它，它应该可以工作。

为了确认，我将变量重命名为 mounted，它起作用了。

TypeScript + React：避免在未安装的组件上使用setState

2 个答案: