reactjs - 类别列表导航在 React App 中不起作用

Question

您好我是新来的反应并试图创建一个电子商务网站。我在我的代码中遇到了一个特定的问题。

正如您从上面的屏幕截图中看到的，我的网站的导航。

每当我尝试单击 Apparel-> Girls 下的 Shoes 链接时，它都不会重定向到新页面。

我不知道我在哪里弄错了。任何人都可以请指导我。或者给出如何进行的见解。

我的代码沙箱链接：

https://codesandbox.io/s/49rnm480x

我的 mainCategory 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.state;
    return mainCategory.map(navList => {
      return (

        <ul className="header">
          <li key={navList.uniqueID}>
            <a className="dropbtn ">{navList.name} </a>
              <ul className="dropdown-content">
                <SubMenu below={navList.catalogGroupView} />
              </ul>


          </li>
        </ul>

      )

    })

  }


}

export default Navigation;

服务器.js

const express = require('express');
const cors = require('cors');
const Client = require('node-rest-client').Client;//import it here
const app = express();

app.use(cors());



app.get('/PDP', (req, res) => {

   var client = new Client();

   // direct way
   client.get("http://149.129.128.3:3737/search/resources/store/1/productview/byId/12501", (data, response) => {
    res.send({ express: data });
   });
});

app.get('/topCategory', (req, res) => {

    var client = new Client();

    // direct way
    client.get("http://149.129.128.3:3737/search/resources/store/1/categoryview/@top?depthAndLimit=-1,-1,-1,-1", (data, response) => {
     res.send({ express: data });
    });
 });

 app.get('/GirlShoeCategory', (req, res) => {

    var client = new Client();

    // direct way
    client.get("http://149.129.128.3:3737/search/resources/store/1/productview/byCategory/10015", (data, response) => {
     res.send({ express: data });
    });
 });






const port = 3030;
app.listen(port, () => console.log(`Server running on port${port}`));

标签： reactjs

Answer 1

您能否提供一个 mainCategory 的示例，因为您是从本地计算机获取它，因此它会在您的代码和框中创建一个错误。