react 点击两次_javascript – 构造函数被调用两次React Component

我的反应组件的构造函数被调用两次,但我无法弄清楚原因.我使用react-redux来存储我的应用程序的语言.我有一个函数,它根据浏览器的语言设置默认语言. LoginPage是第一个获取渲染的组件,因此我在其构造函数中调用了我的函数.基本上它的作用是比较和发送一个动作.当我使用redux开发人员工具检查我的状态时,我发现它已经被派遣了两次.我在构造函数中打印了虚拟数据,它也被打印了两次.

LoginPage.js

import React from 'react';

import {connect} from 'react-redux';

import {startLogin} from '../actions/auth';

import {setLanguage} from '../actions/lang';

export class LoginPage extends React.Component{

constructor(props){

super(props);

this.setDefaultLanguage();

console.log('i am constructor');

}

changeLanguage = (e) => {

const lan = e.target.value;

this.props.setLanguage(lan);

};

setDefaultLanguage = () => {

const defaultLanguage = navigator.language || navigator.userLanguage || 'en-US';

if(defaultLanguage == 'es'){

this.props.setLanguage(defaultLanguage);

}else{

this.props.setLanguage('en');

}

}

render(){

return(

Expensify

It\'s time to get your expenses under control.

Log in with google

English

Español

)

};

}

const mapDispatchToProps = (dispatch) => ({

startLogin: () => dispatch(startLogin()),

setLanguage: (language) => dispatch(setLanguage(language))

});

export default connect(undefined, mapDispatchToProps)( LoginPage);

App.js

import React from 'react';

import ReactDom from 'react-dom';

import {Router, Route, Switch} from 'react-router-dom';

import createHistory from 'history/createBrowserHistory';

import ExpenseDashBoardPage from '../components/ExpenseDashBoardPage';

import AddExpensePage from '../components/AddExpensePage';

import EditExpensePage from '../components/EditExpensePage';

import NotFoundPage from '../components/NotFoundPage';

import LoginPage from '../components/LoginPage';

import PrivateRoute from './PrivateRoute';

import PublicRoute from './PublicRoute';

export const history = createHistory();

const AppRouter = () => (

)

export default AppRouter;

解决方法:

我遇到了同样的问题,因为我在公共路线中重定向用户.所以它是两次渲染组件.如果您正在使用

history.push('/');

这将使组件呈现两次.

标签：javascript,constructor,reactjs,react-router,react-redux

来源： https://codeday.me/bug/20190611/1216579.html