Question

我是新来的反应者和还原者，我创建了一个小型的电子商务应用程序。但是，在实现redux之前，一切工作正常，在实现它之后，我得到“无法读取未定义的属性'map'”。所以，我在下面分享我的代码

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.log(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.prop更改this.state之后，现在我的回应来了。但是在浏览器中，它都是空白。

Answer 1

在topNavigation.js

更改

  const { mainCategory } = this.props;

收件人

  const { mainCategory } = this.state;

问题是，您正在componentDidMount中进行api调用并将响应设置为mainCategory状态，但是您正在对mainCategory道具执行.map，这不存在，这就是为什么获得未定义.map的原因

在React中实现Redux后，地图功能无法正常运行

1 个答案: