“在现有状态转换期间无法更新”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作为第二个参数到连接函数。