Question

在Redux状态下，我拥有财产data。现在，我有2个组件：compA和compB。当我初始化这些组件时，它们每个都运行以下代码：

componentWillMount() {
  this.props.onSectionInit('compA');
}

onSectionInit从数据库（在我的情况下为Firebase）检索适当的数据，并将其存储在data属性中。在每个组件的render方法中，我具有以下代码：

const {
  data,
  error,
} = this.props;

let content = error ? <p>Oops, couldn't load data...</p> : <Spinner />;

if ( data.length > 0 ) {
  content = (
    data.map(item=> {
      return (
        <CompAItem
          item={item}
          key={item.id} />
      );
    })
  );
}
return (
  <SectionContainer>
    {content}
  </SectionContainer>
);

从数据库返回的数据对于每个组件具有不同的字段和结构。现在我有这种情况：

打开应用并导航至compA页面-正确呈现
导航到compB页面-正确呈现
再次导航到compA-应用程序崩溃

经检查，我发现在重新渲染compA的时候，状态仍然具有compB的数据，因此无法渲染必要的字段。

现在，我尝试重置compB的componentWillUnmount中的数据，但显然此方法在compA的componentWillMount之后运行。

是否可以使这两个组件都具有相同的data属性？还是我需要为每个组件（即compAData，compBData）使用不同的属性，尤其是考虑到会有很多这样的组件？或者，也许是每个组件专用的减速器？最佳做法是什么？

如何对具有不同数据的2个组件使用单个Redux状态属性

0 个答案: