Я перенес свой проект из просто React в стек React, Redux и response-redux, и произошла ошибка. До переноса в этот стек все работало адекватно. введите описание изображения здесь. Я пытался исправить это через 3 дня, но это не сработало.

Мой index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import store from "./store/date";
import {BrowserRouter} from "react-router-dom";
import {Provider} from "react-redux";
import App from "./App";
const rerender=()=> {
    ReactDOM.render(
        <BrowserRouter>
            <Provider store={store}>
            <App /></Provider></BrowserRouter>, document.getElementById("root")
    );
};
rerender();
store.subscribe(()=>{
    rerender()
})

Мой файл с датой (date.js):

import {combineReducers, createStore} from "redux";
import realtorsDate from "./realtorsDate";
let isMenuVisible = true;
const UpdateMenu = (state = isMenuVisible, action) => {
    switch (action.type) {
        case 'UpdateMenu' :
            let copystate = !state;
            return copystate;
        default :
            return state;
     }
};
let menuDate=[
    {
        Name: "Main",
        Symbol: "/",
        Src: ""
    },
    {
        Name: "logo",
        Symbol: "img",
        Src: "./../Images/logo.png"
    },
    {
        Name: "About us",
        Symbol: "#",
        Src: "about"
    },
    {
        Name: "Our team",
        Symbol: "#",
        Src: "team"
    },
    {
        Name: "Vacancies",
        Symbol: "/",
        Src: "work"
    },
    {
        Name: "Advantage",
        Symbol: "#",
        Src: "adv"
    },
    {
        Name: "Contacts",
        Symbol: "#",
        Src: "cont"
    }
]
let reducers=combineReducers({UpdateMenu,realtorsDate})
const store=createStore (UpdateMenu,menuDate);
export default store;

Контейнерный компонент:

import {connect} from "react-redux";
import MobileMenu from "./menu";
let menuStateText= {
    type: "UpdateMenu"
}
let MapStateToProps=(state)=>{
    return {
        menuDate: state.menuDate}}
let MapDispatchToProps=(dispatch)=>{
    return {
        UpdateMenu: ()=> {
            dispatch (menuStateText)
        }
    }
}
let MobileMenuContainer=connect(MapDispatchToProps,MapStateToProps)(MobileMenu);
export default MobileMenuContainer

Составная часть:

import React from "react"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBars} from "@fortawesome/free-solid-svg-icons/faBars";
import "./../css/App.css"
import ParagraphOfMenu from "./paragraphMenu";
class MobileMenu extends React.Component {
    render(props) {
        debugger
        let Menu =()=>{this.props.menuDate.map((el,i) => (
            <ParagraphOfMenu el={el} key={i}/>
        ))}
        return (
            <div className="mobileMenuBlock">
                <FontAwesomeIcon icon={faBars} onClick="return false"></FontAwesomeIcon>
                <header className={(this.props.UpdateMenu) ?"hidemenu":"mobilemenu"}>
                    <nav>
                        <ul className="">
                            <Menu></Menu>
                        </ul>
                    </nav>
                </header>
            </div>
        );
    }
}
export default MobileMenu

Ссылка на код: codeandbox

Заранее спасибо

0
derty14 27 Фев 2020 в 14:06

3 ответа

Лучший ответ

В коде было много ошибок:

  1. connect принимает первый аргумент как MapStateToProps, а второй как MapDispatchToProps, вы передаете его в неправильном порядке.
  2. Ваша переменная let Menu определяется как функция, она должна быть Компонентом.
  3. Метод Update определен в методе рендеринга, его следует вместо этого определить как метод класса. Поскольку вы уже и вызовите метод, который вы получите в реквизит там.

Вы можете сослаться на этот рабочий код: https://codesandbox.io / s / eager-bose-5lejz? fontsize = 14 & hidenavigation = 1 & theme = dark

0
Vaibhav Singh 27 Фев 2020 в 13:04
let MobileMenuContainer = connect(
  MapStateToProps,
  MapDispatchToProps
)(MobileMenu);

Вот ваша проблема, вам нужно передать MapStateToProps вместо MapDispatchToProps

1
Nicolae Maties 27 Фев 2020 в 13:05

В этом коде я нашел несколько проблем, поэтому я укажу их вам и надеюсь, что они могут вам помочь.

Прежде всего, посмотрите на это:

const store = createStore(UpdateMenu, menuDate);

Это позволяет создать новое хранилище и инициализировать его значением, которое вы передали в качестве аргумента . Поскольку вы передали один редуктор в функцию createStore, значение, присвоенное state, будет массивом, который вы имели в переменной menuDate.

В данный момент вы не можете получить доступ к state.menuDate, потому что state это не объект : он содержит сам массив. Если вы хотите получить этот массив, вам нужно обновить метод MapStateToProps следующим образом:

let MapStateToProps = (state) => {
    return { menuDate: state }
}

Я также заметил, что вы используете combineReducers, но в итоге вы не используете комбинированный редуктор для чего-либо.

let reducers = combineReducers({
  UpdateMenu,
  realtorsDate
});

Если вы хотите использовать оба, вы должны обновить вызов createStore, передав ему объединенные редукторы, а не UpdateMenu.

createStore(reducers)

Если вы решите это сделать, помните, что созданный вами магазин будет иметь следующую структуру:

{
  UpdateMenu: [value returned by the UpdateMenu reducer],
  realtorsDate: [value returned by the realtorsDate reducer]
}

Если вы хотите применить другую структуру для своего магазина, вы должны изменить передаваемый объект на combineReducer. Вот пример:

combineReducers({
  post: postReducer,
  topic: topicReducer
})

Вам также следует взглянуть на то, как вы звоните connect:

let MobileMenuContainer=connect(MapDispatchToProps,MapStateToProps)(MobileMenu);

Вы передаете два аргумента в обратном порядке . Как вы можете видеть в официальных react-redux документах, {{X1} } должен быть первым параметром, а MapDispatchToProps - вторым.

Последняя, и не в последнюю очередь, проблема, которую я обнаружил, заключается в реализации самого редуктора UpdateMenu.

const UpdateMenu = (state = isMenuVisible, action) => {
    switch (action.type) {
        case 'UpdateMenu' :
            let copystate = !state;
            return copystate;
        default :
            return state;
     }
};

Я не совсем уверен в том, что должно делать ваше действие, но сейчас ваше состояние содержит массив элементов . Когда действие UpdateMenu запускает , то этот массив заменяется значением false . Это означает, что вы теряете все свои данные, поэтому вам, вероятно, следует проверить это.

Если вы не предотвратите это, вы столкнетесь с новой ошибкой при вызове map, потому что ваше состояние больше не содержит массив после отправки действия UpdateMenu. Редуктор должен вернуть новый массив с обновленными данными, чтобы все работало как положено.

1
LonelyPrincess 27 Фев 2020 в 13:25