Reactjs 反应本机&；Redux：如何以及在何处使用componentWillMount（）_Reactjs_Facebook_React Native_Redux_React Redux

Reactjs 反应本机&；Redux：如何以及在何处使用componentWillMount（）

reactjs facebook react-native redux

Reactjs 反应本机&；Redux：如何以及在何处使用componentWillMount（）,reactjs,facebook,react-native,redux,react-redux,Reactjs,Facebook,React Native,Redux,React Redux,我使用react native和redux在facebook登录的应用程序上工作。现在我面临一个问题： Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; c

我使用react native和redux在facebook登录的应用程序上工作。现在我面临一个问题：

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

所以我想我必须在render方法之前使用componentWillMount（），但我不知道如何使用它

容器/Login/index.js

import React, { Component } from 'react';
import { View, Text, ActivityIndicatorIOS } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../../actions';
import LoginButton from '../../components/Login';
import reducers from '../../reducers';
import { Card, CardSection, Button } from '../../components/common';


class Login extends Component {

  // how sould I use it ?
  componentWillMount() {

  }

  render() {
    console.log(this.props.auth);
    const { actions, auth } = this.props;
    var loginComponent = <LoginButton onLoginPressed={() => actions.login()} />;
    if(auth.error) {
      console.log("erreur");
      loginComponent = <View><LoginButton onLoginPressed={() => actions.login()} /><Text>{auth.error}</Text></View>;
    }
    if (auth.loading) {
      console.log("loading");
      loginComponent = <Text> LOL </Text>;
    }
    return(
      <View>
        <Card>
          <CardSection>
            { auth.loggedIn ? this.props.navigation.navigate('Home') : loginComponent }
          </CardSection>
        </Card>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actionCreators, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

以及行动：

import {
  LOADING,
  ERROR,
  LOGIN,
  LOGOUT,
  ADD_USER
} from './types';
import { facebookLogin, facebookLogout } from '../src/facebook';

export function attempt() {
  return {
    type: LOADING
  };
}

export function errors(err) {
  return {
    type: ERROR,
    err
  };
}

export function loggedin() {
  return {
    type: LOGIN
  };
}

export function loggedout() {
  return {
    type: LOGOUT
  };
}

export function addUser(id, name, profileURL, profileWidth, profileHeight) {
  return {
    type: ADD_USER,
    id,
    name,
    profileURL,
    profileWidth,
    profileHeight
  };
}

export function login() {
  return dispatch => {
    console.log('Before attempt');
    dispatch(attempt());
    facebookLogin().then((result) => {
      console.log('Facebook login success');
      dispatch(loggedin());
      dispatch(addUser(result.id, result.name, result.picture.data.url, result.picture.data.width, result.data.height));
    }).catch((err) => {
      dispatch(errors(err));
    });
  };
}

export function logout() {
  return dispatch => {
    dispatch(attempt());
    facebookLogout().then(() => {
      dispatch(loggedout());
    })
  }
}

如果您需要更多代码，请参见我的回购协议：

组件willmount（）将在装入之前立即调用。它在render（）之前调用，因此在此方法中设置状态不会触发重新渲染。避免在这种方法中引入任何副作用或订阅

如果您需要更多信息，componentWillMount（）阅读此篇

componentWillMount（）将在装入之前立即调用。它在render（）之前调用，因此在此方法中设置状态不会触发重新渲染。避免在这种方法中引入任何副作用或订阅

如果您需要更多信息，componentWillMount（）

阅读此

根据您对Ajay答案的评论，您希望在组件中设置初始状态。要执行此操作，请在中设置状态

如果您有异步获取的数据要置于组件状态

根据您对Ajay答案的评论，您希望在组件中设置初始状态。要执行此操作，请在中设置状态

如果您有异步获取的数据要置于组件状态

componentWillMount

是创建组件时要运行的第一个函数之一<首先运行code>getDefaultProps，然后运行

getInitialState

，然后运行

componentWillMount

。只有使用react.createClass方法创建组件时，才会运行

getDefaultProps

和

getInitialState

。如果该组件是扩展React.component的类，则不会运行这些方法。如果可以，建议使用

componentDidMount

，而不是

componentWillMount

，因为在componentWillMount和第一次渲染之前仍然可以更新组件

您可以找到有关react组件生命周期的更多信息

此外，建议在类构造函数内或使用

getDefaultProps

和

getInitialState

设置状态或默认属性

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={bar:'foo'}； } 静态defaultProps={ 福：“酒吧” }; } 编辑：这是组件处理登录

import React，{Component}来自'React'；
从“react native”导入{View，Text，ActivityIndicatorIOS}；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“../../actions”导入*作为ActionCreator；
从“../../components/Login”导入登录按钮；
从“../../reducers”导入减速机；
从“../../components/common”导入{Card，CardSection，Button}；
类登录扩展组件{
componentDidMount（）{
//如果用户已登录
if（this.props.auth.loggedIn）{
//在此处重定向用户
}
}
组件将接收道具（下一步）{
//如果用户刚刚登录
if（！this.props.auth.loggedIn&&nextrops.auth.loggedIn）{
//在此处重定向用户
}
}
render（）{
log（this.props.auth）；
const{actions，auth}=this.props；
var loginComponent=actions.login（）}/>；
如果（验证错误）{
控制台日志（“erreur”）；
loginComponent=actions.login（）}/>{auth.error}；
}
如果（授权加载）{
控制台日志（“加载”）；
loginComponent=LOL；
}
返回(
{auth.loggedIn？this.props.navigation.navigate（'Home'）：loginComponent}
);
}
}
函数MapStateTops（状态）{
返回{
auth:state.auth
};
}
功能图DispatchToprops（调度）{
返回{
操作：bindActionCreators（actionCreators，调度）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（登录）；

组件willmount

是创建组件时首先要运行的函数之一<首先运行code>getDefaultProps，然后运行

getInitialState