时间戳

首页 > 解决方案 > ReactJs ComponentDidMount

javascript - ReactJs ComponentDidMount

问题描述

我的应用程序有一些问题，我不是 Javascript 专家，但它的接缝很容易修复。我需要打电话

this.props.onNavStyleChange(NAV_STYLE_FIXED);

在此页面加载时更改我的导航。但它给出了错误

第 13 行：解析错误：意外的令牌，预期的“;”

这是完整的代码

import React, { Component, Fragment } from "react";
import { Col, Menu, Icon, Row } from "antd";
import { connect } from "react-redux";

import { Redirect, Route, Switch, Link } from "react-router-dom";
import asyncComponent from "util/asyncComponent";
import {
    NAV_STYLE_FIXED,
} from "../../constants/ThemeSetting";

import { onNavStyleChange } from "appRedux/actions/Setting";

componentDidMount() {
    this.props.onNavStyleChange(NAV_STYLE_FIXED);
}


const Dashboard = ({ match, isAuthenticated }) => (


    <div className="gx-main-content-wrapper">

    <Col span={24}>

            <Switch>
                <Redirect exact from={`${match.url}/`} to={`${match.url}/Dashboard`} />

                <Route path={`${match.url}/dashboard`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./Dashboard'))
                        : () => <Redirect to="/home" />} />


                <Route path={`${match.url}/news`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./News'))
                        : () => <Redirect to="/home" />} />

                <Route path={`${match.url}/servers`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./Servers'))
                        : () => <Redirect to="/home" />} />

                <Route path={`${match.url}/billing`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./Billing'))
                        : () => <Redirect to="/home" />} />


                <Route path={`${match.url}/serverInfo/:id`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./ServerInfo'))
                        : () => <Redirect to="/home" />} />


                <Route path={`${match.url}/support`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./Support'))
                        : () => <Redirect to="/home" />} />

            </Switch >
    </Col>
    </div>
);

const mapStateToProps = state => {
    return {
        isAuthenticated: state.auth.token !== null
    };
};

export default connect(mapStateToProps, null)(Dashboard);

标签： javascriptreactjs

解决方案

代码中有几处不正确，但我将涵盖所有内容。

  1. 您看到的错误是因为componentDidMount被编写为函数但未声明为函数。

IE。

function componentDidMount() {
    this.props.onNavStyleChange(NAV_STYLE_FIXED);
}

const componentDidMount = () => {
    this.props.onNavStyleChange(NAV_STYLE_FIXED);
}
  1. 生命componentDidMount周期仅在基于类的组件中可用。
class MyComponent extends React.Component {
  ...
  componentDidMount() { ... }
  ...
}

如果您想使用功能组件，那么您需要查看钩子。在这种情况下，您将看到useEffect.

function MyComponent() {
  useEffect(() => {
    ...
  }, [])
}

推荐阅读