“在现有状态转换期间无法更新”React Native和Redux中使用外部API时出错

问题描述：

我正在编写React Native应用程序并使用Redux。“在现有状态转换期间无法更新”React Native和Redux中使用外部API时出错

我跟着this教程。

我都面临着以下警告消息：

警告：现有的状态转变（如在“渲染”或其他部件的构造函数）时，无法更新。渲染方法应该是道具和状态的纯粹功能;构造函数的副作用是一个反模式，但是可以移动到 'componentWillMount'

这里是我有：

MyComponent.js

import React from 'react'; 
import { login } from './actions' 
import { connect } from 'react-redux'; 
import { View, Text } from 'react-native'; 
import { Button } from 'native-base'; 

class MyComponent extends React.Component { 
    render() { 
    return(
     <View> 
     <Button onPress={() => this.props.login("username","password")}> 
      <Text> 
      Login! 
      <Text> 
     </Button> 
     </View> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { state: state.login } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    login: (username, password) => dispatch(login(username, password)) 
    } 
} 

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

App.js

import React, { Component } from 'react'; 
import MyComponent from './MyComponent'; 

import { Provider } from 'react-redux'; 

import configureStore from './configureStore'; 
import Route from './config/Router'; 

export default class App extends Component { 
    render() { 
    let store = configureStore(); 
    return (
     <Provider store={store}> 
     <MyComponent /> 
     </Provider> 
    ); 
    } 
}

configureStore.js个

import { createStore } from 'redux'; 
import reducers from './reducers'; 
import thunk from 'redux-thunk'; 

export default function configureStore() { 
    let store = createStore(reducers, applyMiddleware(thunk)); 
    return store; 
}

reducers.js

import * from './constants' 
import { combineReducers } from 'redux'; 

const initialState = { 
    isLoggedIn: false, 
    isLoggingIn: false, 
    username: '', 
    error: false 
}; 

function loginReducer(state = initialState, action) { 
    console.log('Reducer is called.'); 
    console.log('Action is ' + JSON.stringify(action)); 
    console.log('state is ' + JSON.stringify(state)); 
    switch (action.type) { 
    case LOGGING_IN: 
     return { 
     ...state, 
     isLoggedIn: false, 
     isLoggingIn: true, 
     username: '', 
     error: false 
     } 
    case LOG_IN_SUCCESS: 
     return { 
     ...state, 
     isLoggedIn: true, 
     isLoggingIn: false, 
     username: action.data.username, 
     error: false 
     } 
    case LOG_IN_FAILURE: 
     return { 
     ...state, 
     isLoggedIn: false, 
     isLoggingIn: false, 
     username: '', 
     error: true 
     } 
    } 
} 

export default rootReducer = combineReducers({ 
    loginReducer, 
});

actions.js

import * './constants' 
import { Actions } from 'react-native-router-flux'; 

export function login(username, password) { 
    return (dispatch) => { 
    dispatch(loggingIn()) 
    //here will be some API ASYNC CALLS! 
    //depending on the result we will dispatch again! 
    myService.login(username,password).done((result) => { 
     if(result !== null) { 
     dispatch(loginSuccess(result)) 
     } else { 
     dispatch(loginFailure()) 
     } 
    }) 
    } 
} 

function loggingIn() { 
    return { 
    type: LOGGING_IN 
    } 
} 

function loginSuccess(data) { 
    return { 
    type: LOG_IN_SUCCESS, 
    data: data 
    } 
} 

function loginFailure() { 
    return { 
    type: LOG_IN_FAILURE 
    } 
}

我已经调试代码。我已经看到警告在第一次调度后立即发出！（dispatch（loggingIn（）））

所以，我不知道是什么问题。

我也想知道这是否是真正使用redux和异步API调用。你可以帮我吗？非常感谢。

答

我认为有些事情错在这里

function mapStateToProps(state) { 
    return { state: state.login } 
}

应该

function mapStateToProps(state) { 
    return { loginReducer: state.loginReducer } 
}

答

据我从我的经验还记得，此错误当你试图更新东西通常会出现你的渲染方法，这是禁止的。

确认它没有在您的应用中发生。

UPD：尝试创建以上功能的渲染方法调用this.props.login，而不是做这里面mapDispatchToProps的。并添加您的登录动作创建者而不是mapDispatchToProps作为第二个参数到连接函数。

“在现有状态转换期间无法更新”React Native和Redux中使用外部API时出错

相关推荐