我无法在我的React应用中创建导航栏

Question

import React, { Component } from "react";
import { Route, BrowserRouter } from 'react-router-dom';
import { NavLink as navlink } from 'react-router-dom';
import axios from 'axios';

import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from 'reactstrap';
import Home from "./Home";
import Shop from "./Shop";
import About from "./About";

import Footer from "./components/Footer";



class Main extends Component {

  state = {
    topCategory: []


}
componentDidMount() {
    axios.get('http://localhost:3030/topCategory')
        .then(res => {
            console.log(res.data.express.catalogGroupView);
            this.setState({
                productDetails: res.data.express.catalogGroupView
            })
        })
}
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    const { topCategory } = this.state;

    return (

      <BrowserRouter>
        <div>

          <Navbar color="light" light expand="md">
            <NavbarBrand href="/">iFashion</NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink exact to="/" tag={navlink}>Apparel</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="/home" tag={navlink}>Electronics</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="" tag={navlink}>Grocery</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="" tag={navlink}>Health</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="" tag={navlink}>Home Furnishings</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="" tag={navlink}>Newsletters & Magazines</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="/shop" tag={navlink}>Shop</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="/about" tag={navlink}>About</NavLink>
                </NavItem>
              </Nav>
            </Collapse>
          </Navbar>

          <div className="content">
            <Route exact path="/home" component={Home} />
            <Route path="/shop" component={Shop} />
            <Route path="/about" component={About} />
          </div>


          <Footer />
        </div>

      </BrowserRouter>

    );
  }
}

export default Main;

我正在发送json响应数据。

json response

你好，我是新来的反应者，我正在尝试创建一个电子商务网站。我已经创建了主页和导航。但是，导航类别（如服装，电子产品）应来自端点api网址。为此，我使用axios通过节点服务器获取数据。但是我面临的问题是我无法从JSON响应中呈现导航。现在，已经硬着头皮了。有人可以帮我这个忙吗？我无法弄清楚。

我在控制台浏览器中的回复

Console browser window