Question

我正在开发一个显示数据的组件，具体取决于所选的list-group-item。所选项目（或类型）存储在组件的状态中。

我面临的问题是，第三方组件（取决于类型）会在componentDidMount生命周期调用中加载数据。

我的组件的render看起来像这样：

{(() => {
    if (this.componentCache[selectedType] == null) {
        switch (selectedType) {
            case Type1:
                this.componentCache[selectedType] = <ThirdPartyComponent type={selectedType} />;
                break;
            case Type2:
                this.componentCache[selectedType] = <ThirdPartyComponent type={selectedType} />;
                break;
            case Type3:
                this.componentCache[selectedType] = <ThirdPartyComponent type={selectedType} />;
                break;
            case Type4:
                this.componentCache[selectedType] = <ThirdPartyComponent type={selectedType} />;
                break;
            default:
                throw new RangeError(`The type ${selectedType} is not known or not implemented`);
        }
    }

    return this.componentCache[selectedType];
})()}

如果selectedType发生更改，React会将组件视为已安装，并且不会调用componentDidMount生命周期。因此，不会加载任何新数据。

我尝试在private readonly componentCache: {[type:string]:JSX.Element}中缓存组件但仍然相同。另一种尝试是添加一个唯一的key属性。但是它总是调用componentDidMount而不是我想要的。

如何存储/缓存这些组件，使其仅按selectedType加载一次？

ReactJS缓存组件取决于属性

0 个答案: