Javascript React Redux：单击按钮后，页面变为空白白色屏幕，组件不会出现

我正在开发一个React应用程序，并使用Redux存储状态。我有以下代码：

category-arrows.component.jsx：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increaseCategoryRank, decreaseCategoryRank } from '../../redux/menu/menu.actions';
import './category-arrows.styles.scss';

class CategoryArrows extends Component {


    handleClick = (id) => {
        this.props.increaseCategoryRank(id);
    }

    render() {

        const { categoryRank, categoryId, increaseCategoryRank, decreaseCategoryRank } = this.props;

        return (
            <div class="arrows-container">
                <div class="up-arrow" onClick={this.handleClick(categoryId)}></div>
                <div class="category-rank">
                    <p>{categoryRank}</p>
                </div>
                <div class="down-arrow"></div>
            </div>
        )
    }
}

export default connect( { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows);

import React from 'react';
import { connect } from 'react-redux';

import MenuItem from '../../components/menu-item/menu-item.component';
import MenuCarousel from '../../components/menu-carousel/menu-carousel.component';
import NewItemCard from '../../components/new-item-card/new-item-card.component';
import DeleteCategory from '../../components/delete-category/delete-category.component';
import CategoryArrows from
'../../components/category-arrows/category-arrows.component';
import { editCategory } from '../../redux/menu/menu.actions';
import { MANAGER } from '../../redux/user/user.staff-types';

import './menu-category.styles.scss';

const MenuCategory = ({ currentUser, editCategory, isEditing, ...category  }) => {

    const isManager = currentUser && currentUser.type === MANAGER;

    const editableProps = {
        className: isManager ? 'category-editable' : null,
        contentEditable: !!isManager,
        suppressContentEditableWarning: true
    };

    return (
        <div key={category._id} className='menu-category'>
            <h2 {...editableProps} onBlur={event => editCategory({ ...category, name: event.target.innerText })}>
                {category.name}
            </h2>
            <p {...editableProps} onBlur={event => editCategory({ ...category, description: event.target.innerText })} >
                {category.description}
            </p>
            <MenuCarousel>
                {isManager && isEditing ? <CategoryArrows className='category-rank-arrows' categoryRank={category.rank} categoryId={category._id} /> : null}
                {isManager ? <NewItemCard categoryId={category._id} /> : null}
                {category.items.map(menuItem => <MenuItem key={menuItem._id} categoryId={category._id} {...menuItem} />)}
                {isManager ? <DeleteCategory name={category.name} categoryId={category._id} className='delete-bin' /> : null}
            </MenuCarousel>
        </div>
    )
}

const mapStateToProps = state => ({
    currentUser: state.user.currentUser
})

export default connect(mapStateToProps, { editCategory })(MenuCategory);

import React, { Component } from 'react';
import { connect } from 'react-redux';

import MenuCategory from '../../components/menu-category/menu-category.component'
import NewCategoryButton from '../../components/new-category-button/new-category-button.component';
import EditMenuButton from '../../components/edit-menu-button/edit-menu-button.component';

import './menu.styles.scss';

class MenuPage extends Component {

    state = {
        menuEditable: false
    }

    toggleMenuEditable = () => this.setState({ menuEditable: !this.state.menuEditable })

    render() {
                  return (
            <div className='menu-page'>
                {this.props.menu ? this.props.menu.map(category => <MenuCategory key={category._id} {...category} isEditing={this.state.menuEditable} />) : null}
                <div className='edit-menu-buttons'>
                    <div className='menu-button'>
                        {this.props.currentUser ? <NewCategoryButton /> : null}
                    </div>
                    <div className='menu-button'>
                        {this.props.currentUser ? <EditMenuButton onClick={this.toggleMenuEditable} isEditing={this.state.menuEditable} /> : null}
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    currentUser: state.user.currentUser,
    menu: state.menu
})

export default connect(mapStateToProps)(MenuPage);

menu.types.js：

export const INCREASE_CATEGORY_RANK = "INCREASE_CATEGORY_RANK";
export const DECREASE_CATEGORY_RANK = "DECREASE_CATEGORY_RANK";

menu.reducer.js：

import INITIAL_STATE from './menu.data';
import { INCREASE_CATEGORY_RANK, DECREASE_CATEGORY_RANK } from './menu.types';

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case INCREASE_CATEGORY_RANK:
            console.log(action.payload._id);
            return;
        case DECREASE_CATEGORY_RANK:
            console.log(action.payload._id);
            return;
        default:
            return state;
    }
}

menu.data.js：

export default [
    {
        "_id": "c0daac6ab8954a40606dd8b81d24a0ef",
        "name": "Entree",
        "rank": "0",
        "items": [
            {
                "title": "Curry Puffs",
                "price": 14,
                "_id": "615caa7dd573bcf84781c9e4382b520d"
            },
            {
                "title": "Spring Rolls",
                "price": 12,
                "_id": "542f711856b7854b71d9862797620e23"
            },
            {
                "title": "Tandoori Cauliflower",
                "price": 20,
                "_id": "f0c0f2fa02e392ad4e74dfaaf6068fb1"
            }
        ]
    },
    {
        "_id": "934aeba1e96e6d6a4207cd5ba207b52a",
        "name": "Lunch",
        "rank": "1",
        "items": [
            {
                "title": "Spaghetti",
                "price": 20,
                "_id": "db414e2b9951ed621fbf6fb40df36ee3"
            },
            {
                "title": "Spaghetti",
                "price": 20,
                "_id": "253592733a8f7835f390d3d9ed8bda95"
            },
            {
                "title": "Spaghetti",
                "price": 20,
                "_id": "a22741f27a346cda93d3cf752e371779"
            }
        ]
    }
]

在上面的代码中，我有一个

CategoryArrows

组件，只有当

isEditing

值作为道具从

MenuPage

组件传递到

menucategray

组件时，该组件才会在

menucategray

组件中呈现。单击

editmenuubutton

组件时，

isEditing

设置为true，并且

CategoryArrows

组件显示在菜单页面上

单击

向上箭头

div时，我想调度操作

increaseCategoryRank

，该操作将类别id作为参数。我已经为这个操作添加了代码

但是，当我单击

editmenuubutton

组件时，

categoryRows

不会出现，屏幕变为空白白色。我检查页面时出现以下错误：

---

我不知道这个错误意味着什么以及如何解决它。非常感谢您的见解。

您连接的第一个参数是一个对象：

export default connect( { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows);

连接的第一个参数应该是MapStateTops，它是一个函数。如果要访问分派，但不需要状态，则需要将

null

作为连接的第一个参数传递：

connect(null, mapStateToDispatch)

---

要连接的第一个参数是此处的对象：

export default connect( { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows);

连接的第一个参数应该是MapStateTops，它是一个函数。如果要访问分派，但不需要状态，则需要将

null

作为连接的第一个参数传递：

connect(null, mapStateToDispatch)

---

您没有在代码中向redux connect函数传递正确的参数输入

connect函数的第一个参数必须是返回简化状态的mapStateToProps函数

export default connect( null,  { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows); 

passnull作为第一个要连接的参数，因为您似乎没有从redux存储区传递任何道具。

---

请按照上述说明更新category-arrows.component.jsx connect。

您没有在代码中向redux connect函数传递正确的参数输入

connect函数的第一个参数必须是返回简化状态的mapStateToProps函数

export default connect( null,  { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows); 

passnull作为第一个要连接的参数，因为您似乎没有从redux存储区传递任何道具。

---

请按照上述说明更新您的category-arrows.component.jsx connect。

是否正确调度操作？你能在沙箱上旋转项目吗？试着使用

connect（null，{increaseCategoryRank，decreateCategoryRank}）（CategoryRaws）

你是否正确地调度了操作？你能在沙箱上旋转项目吗？尝试使用

connect（null，{increaseCategoryRank，decreateCategoryRank}）（CategoryRaws）