Я новичок в реагировании и сокращении, и я создал небольшое приложение для электронной коммерции. Но до реализации redux все работало нормально, и после его реализации я получаю сообщение «Невозможно прочитать карту свойства undefined». Итак, я делюсь своим кодом ниже
index.js
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./index.css";
import 'bootstrap/dist/css/bootstrap.css';
import {BrowserRouter} from 'react-router-dom';
import { Provider } from 'react-redux';
import { Configuration } from './redux/configureStore';
const store = Configuration();
ReactDOM.render((
<Provider store = {store}>
<BrowserRouter>
<Main/>
</BrowserRouter>
</Provider>
),
document.getElementById("root")
);
Main.js
import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import { Route, Switch, withRouter} from 'react-router-dom';
import Navigation from "./components/topNavigation";
import Footer from "./components/Footer";
import Banner from "./components/Banner";
import PLPMenu from "./components/PLPMenu";
import PDP from "./components/PDP";
import Login from "./components/Login"
import Home from "./components/Home";
import {connect} from 'react-redux';
const mapStateToProps = state =>{
return {
topnavigation: state.topnavigation,
plpmenu: state.plpmenu,
pdpmenu : state.pdpmenu
}
}
class Main extends Component {
render() {
return (
<div>
<Login />
<Navigation />
<Switch>
<Route exact path = "/" component = {Home} />
<Route path = "/Apparel/:category/:subCategory/:id" component = {PLPMenu} />
<Route path = "/Apparel/:product/:id" component = {PDP} />
<Route path = "/login" component = {Login} />
<Route path = "/Banner" component = {Banner} />
<Route path = "/Footer" component = {Footer} />
</Switch>
</div>
)
}
}
export default withRouter(connect(mapStateToProps)(Main));
topNavigation.js
import React, { Component } from 'react';
import axios from 'axios';
import SubMenu from './subMenu';
class Navigation extends Component {
state = {
mainCategory: []
}
componentDidMount() {
axios.get('http://localhost:3030/topCategory')
.then(res => {
// console.info(res.data.express);
this.setState({
mainCategory: res.data.express.catalogGroupView
})
})
}
render() {
const { mainCategory } = this.props;
return (
<nav className = "navbar navbar-expand-lg navbar-dark bg-dark mainmenu">
<a className = "navbar-brand" href = "#">iFashion</a>
<button className = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation">
<span className = "navbar-toggler-icon"></span>
</button>
<div className = "collapse navbar-collapse" id = "navbarNav">
<ul className = "navbar-nav ml-auto">
{
mainCategory.map(navList => (
<li className = "nav-item dropdown" key = {navList.uniqueID}>
<a className = "nav-link dropdown-toggle" id = "navbarDropdown" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">{navList.name} </a>
<ul className = "dropdown-menu secondDropdown" aria-labelledby = "navbarDropdown">
<SubMenu below = {navList.catalogGroupView} />
</ul>
</li>
))
}
</ul>
</div>
</nav>
)
}
}
export default Navigation;
В папке ./src/redux я создал два файла - reducer.js и configureStore.js.
reducer.js
import PLPMenu from "../components/PLPMenu";
import PDP from "../components/PDP";
import Navigation from "../components/topNavigation";
export const initialState = {
topnavigation: Navigation,
};
export const Reducer = ( state = initialState , action) => {
return state;
};
configureStore.js
import { createStore} from 'redux';
import {Reducer, initialState} from './reducer';
export const Configuration = () =>{
const store = createStore(
Reducer,
initialState,
);
return store;
}
Я не знаю, где мой код ошибается. Но до реализации redux все работало нормально. Все, что я получаю, это
Может ли кто-нибудь дать мне представление, как действовать с этой конкретной ошибкой. Или посоветуйте мне устранить эту проблему. Спасибо
Обновлено: После изменения this.state на this.prop теперь приходят мои ответы. Но в браузере все пустое.
В topNavigation.js
Изменять
const { mainCategory } = this.props;
К
const { mainCategory } = this.state;
Проблема в том, что вы выполняете вызов api в componentDidMount и устанавливаете ответ на состояние mainCategory, но вы делаете .map для свойств mainCategory, которых не существует, и поэтому вы получаете .map of undefined
Проверьте, получаете ли вы ответ при вызове componentDidMount Api. Если вы получили ответ, сделайте консольный журнал ответа и дайте мне знать, что он печатает.
Ответы приходят .... Я отправил снимок экрана. Ты можешь мне немного помочь
Я изменил его на this.state. Но на моем экране ничего не отображается