React-Redux: страница становится пустым белым экраном после нажатия кнопки, и компоненты не отображаются - PullRequest
Новая
       1

React-Redux: страница становится пустым белым экраном после нажатия кнопки, и компоненты не отображаются

0 голосов
/ 15 апреля 2020

Я работаю над приложением React и использую Redux для хранения состояния. У меня есть следующий код:

category-arrow.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);

menu-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 только если значение isEditing, которое передается от компонента MenuPage компоненту MenuCategory в качестве реквизита, является истинным. При нажатии на компонент EditMenuButton для isEditing устанавливается значение true, а на странице меню появляются компоненты CategoryArrows.

При нажатии на элемент up-arrow я хочу отправить действие increaseCategoryRank, который принимает идентификатор категории в качестве параметра. Я добавил код для этого действия.

Однако, когда я щелкаю по компоненту EditMenuButton, CategoryArrows не появляется, и экран становится пустым белым. При просмотре страницы появляется следующая ошибка: 

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

Я не уверен, что означает эта ошибка и как ее устранить. Любые идеи приветствуются.

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Вы не передали правильные входные параметры для функции редукционного соединения в своем коде.

Первым аргументом функции соединения должна быть функция mapStateToProps, которая возвращает сокращенное состояние. 

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

Pass NULL в качестве первого параметра для подключения, так как вы, похоже, не пропускаете ни одного реквизита из хранилища приставок. Пожалуйста, обновите вашу категорию-arrow.component.jsx, как указано выше.

1 голос
/ 15 апреля 2020

Ваш первый аргумент для подключения - это объект здесь: 

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

Первым аргументом для подключения должен быть mapStateToProps, который является функцией. Если вы хотите получить доступ к диспетчеризации, но не нуждаетесь в состоянии, вам нужно передать null в качестве первого аргумента для подключения: 

connect(null, mapStateToDispatch)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...