网页启动时自动填充列表 - React、Redux、Firebase

Question

我正在创建一个网页，它有两个组件，一个 Categories 和两个 Items

借助函数 initCategories() 我在类别的 componentDidMount() 中调用，我能够在我的屏幕上显示所有类别。 initCategories() 函数调用负责从 Firestore 获取所有类别的操作

我想在启动时显示 Items 表中具有第一个类别 ID 的类别字段的所有项目在 Categories 表中。我使用 mapStateToProps 方法将 firstCategoryId 作为道具。我试图在 action.js 文件中调用一个操作，并在 items 内的 componentDidMount() 方法中传递此 ID，以便获取所有项目。

我该如何解决这个问题？

更新

Categories 表包含 categoryName 和 categoryId。 Items 表包含 itemId、itemName 和 category。 Item表中的category字段保存了item所属的category的ID

ma​​pStateToProps()

const mapStateToProps = state => {
  console.log("mapping called")
    return {
      items: state.itemReducer.itemsOnDisplay,
      currentCategoryId: state.reducer.currentCategoryId
    };
  }
  const mapDispatchToProps = dispatch => {
    return{
    //   onCategoryAdded: (category) => dispatch(actionCreators.addCategory(category)),
    //   onCategoryDeleted: (categoryId) => dispatch(actionCreators.deleteCategory(categoryId)),
      loadItemsInCategory: (categoryId) => dispatch(itemActionCreators.loadItemsInCategory(categoryId)),
    }
  }

componentDidMount()

componentDidMount(){
  this.props.loadItemsInCategory(this.props.currentCategoryId)
}

Answer 1

我终于解决了这个问题。谢谢大家，尤其是@gbalduzzi 帮我解决了这个问题。

据我了解的实际问题： 创建商店时，reducer 会使用默认值初始化。那是第一次调用 componentDidMount() 的时候。当下载来自 firebase 的值时，组件会更新。这一次，被触发的是 componentDidUpdate() 方法。

componentDidUpdate()

解决方案：
我添加了以下代码。有了这个，我只在组件使用来自 firebase 的值更新时才加载项目。

componentDidUpdate(prevProps, prevState, snapshot) {
  if(this.props.currentCategoryId!== prevProps.currentCategoryId){
    this.props.loadItemsInCategory(this.props.currentCategoryId)
  }
}

Answer 2

你为什么不使用钩子？

对于使用钩子的无状态组件，您可以执行以下操作：

// items.jsx
const { categoryId } = props;
const [items, setItems] useState([]);

useEffect(() => {
  fetchItemsByCategoryId(categoryId).then(items => setItems(items));
}, [categoryId])

return <ul>{items.map((item) = <li><Item item={item} /></li>)</ul>

我建议您阅读以下文档： https://reactjs.org/docs/hooks-intro.html