javascript - React-Redux：单击按钮后页面变为空白屏幕并且不出现组件

问题描述

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

类别箭头.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);

菜单-category.component.jsx：

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);

menu.component.jsx：

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.actions.js：

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

export const increaseCategoryRank = categoryId => dispatch => {
    dispatch({ type: INCREASE_CATEGORY_RANK, payload: categoryId })
}

export const decreaseCategoryRank = categoryId => dispatch => {
    dispatch({ type: DECREASE_CATEGORY_RANK, payload: categoryId })
}

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组件，MenuCategory只有当作为 propsisEditing从MenuPage组件传递到组件的值是 true 时，才会在组件中呈现该组件。MenuCategory当EditMenuButton组件被点击时，isEditing设置为true，并且CategoryArrows组件出现在菜单页面上。

单击 div时，up-arrow我想调度 action increaseCategoryRank，它将类别 id 作为参数。我已经为此操作添加了代码。

但是，当我单击该EditMenuButton组件时，CategoryArrows不会出现并且屏幕变为空白。检查页面时出现以下错误：

Uncaught Error: Invalid value of type object for mapStateToProps argument when connecting component CategoryArrows.

我不确定这个错误是什么意思以及如何解决它。任何见解都值得赞赏。

标签： javascriptreactjsredux

javascript - React-Redux：单击按钮后页面变为空白屏幕并且不出现组件

问题描述

解决方案

推荐阅读