如何解决 React 中的构造函数问题？

发布于 2025-01-10 07:14:26 字数 2112 浏览 1 评论 0原文

我是 React 的新手..我正在尝试一些电子商务应用程序的教程...但没有结果..并且我无法使用 super(props) 修复此错误...任何想法如何解决这个问题吗？运行 npm start 后，我的页面全是空白......：

 class App 扩展组件 {
      构造函数（道具）{
        超级（道具）；
    
        这个.状态 = {
          用户：空，
          购物车：{}，
          产品： []
        };
        this.routerRef = React.createRef();
      }
    
      使成为（） {
        返回 （
          
            <路由器参考={this.routerRef}>
            
              <导航
                className =“导航栏容器”
                角色=“导航”
                aria-label="主导航"
              >
                
                  电子商务
                  <标签
                    角色=“按钮”
                    类=“导航栏-汉堡汉堡”
                    咏叹调标签=“菜单”
                    咏叹调扩展=“假”
                    数据目标=“navbarBasicExample”
                    onClick={e =>; {
                      e.preventDefault();
                      this.setState({ showMenu: !this.state.showMenu });
                    }}
                  >
                    
                    
                    
                  
                
                
                <路线>
                  }/>;
                  <路由路径=“/登录”元素={<登录/>}/>;
                  <路线路径=“/cart”元素={<购物车/>}/>
                  <路线路径=“/add-product”元素={}/>
                  }/>;
                                    
              
            
          
        ）；
      }
    };
    导出默认应用程序；

Chrome 中的错误 [https://imgur.com/a/Eey1KTF]

原文

I'm a newbie with React.. I'm trying some tutorials with some e-ecommerce app... but with no result..and I can't fix this error with super(props)...Any ideas how to solve this?And after running npm start, my page is all blank...:

 class App extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          user: null,
          cart: {},
          products: []
        };
        this.routerRef = React.createRef();
      }
    
      render() {
        return (
          <Context.Provider
            value={{
              ...this.state,
              removeFromCart: this.removeFromCart,
              addToCart: this.addToCart,
              login: this.login,
              addProduct: this.addProduct,
              clearCart: this.clearCart,
              checkout: this.checkout
            }}
          >
            <Router ref={this.routerRef}>
            <div className="App">
              <nav
                className="navbar container"
                role="navigation"
                aria-label="main navigation"
              >
                <div className="navbar-brand">
                  <b className="navbar-item is-size-4 ">ecommerce</b>
                  <label
                    role="button"
                    class="navbar-burger burger"
                    aria-label="menu"
                    aria-expanded="false"
                    data-target="navbarBasicExample"
                    onClick={e => {
                      e.preventDefault();
                      this.setState({ showMenu: !this.state.showMenu });
                    }}
                  >
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                  </label>
                </div>
                </nav>
                <Routes>
                  <Route  path="/" element={<ProductList/>}/>
                  <Route  path="/login" element={<Login/>}/>
                  <Route  path="/cart" element={<Cart/>}/>
                  <Route  path="/add-product" element={<AddProduct/>}/>
                  <Route  path="/products" element={<ProductList/>}/>
                </Routes>                    
              </div>
            </Router>
          </Context.Provider>
        );
      }
    };
    export default App;

And the errors in Chrome [https://imgur.com/a/Eey1KTF]

分享到QQ

分享到微博