React/redux : this.props returns 未定义值 + 数组

Question

我正在使用 React/redux 构建我的应用程序。

这是我的数据 (json)

{
  "categories": [
    {
      "id": 1,
      "name": "category 1",
      "slug": "category-1"
      "content": [
        {
          "id": 1,
          "title": "title 1 "
        },
        {
          "id": 2,
          "title": "title 2 "
        }
      ]
    }
  ]
}

我想做什么：

select一个类别
显示类别的内容selected

我的店就是这样:

categoryItems: [], // list of categories
categorySelected: []

当我select一个类别

时，数据正确保存在我的状态中

在 Category 组件上，我实现了 selectCategory 函数，它调用操作 SELECT_CATEGORY 并将数据分派给 reducer。到目前为止一切顺利！

getCategoryList() {
   return this.props.categories.map((category) => {
     return (<li key={category.id}> 
            <Link to={`/category/${category.slug}`} onClick={() =>this.props.selectCategory(category.slug)} >{category.name} </Link>)});}

在 CategoryDetail 上，当我 console.log(this.props.categorySelected.name) 我得到：

undefined
name

这是问题，因为我无法阅读 this.props.categorySelected.name 如何解决这个问题并正确阅读这个道具？

Answer 1

您必须将完整的对象提供给您的 selectCategory() 函数。

像这样：

getCategoryList() {
   return this.props.categories.map((category) => {
     return (<li key={category.id}> 
            <Link to={`/category/${category.slug}`} onClick={() =>this.props.selectCategory(category)} >{category.name} </Link>)});
}

React/redux : this.props returns 未定义值 + 数组

React/redux : this.props returns undefined value + array

redux

react-redux

react-props