× Maximum update depth exceeded - reactjs

Question

Maximum update depth exceeded. This can happen when a component
repeatedly calls setState inside componentWillUpdate or
componentDidUpdate. React limits the number of nested updates to
prevent infinite loops.
this is bossinfo.js
import React from 'react';
import { NavBar, InputItem, TextareaItem, Button } from 'antd-mobile';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import AvatarSelector from '../../component/avatar-selector/avatar-selector';
import {updata} from '../../redux/user.redux';
#connect(
state=>state.user,
{updata}
)
class BossInfo extends React.Component{
constructor(props){
super(props)
this.state={
title:'',
company:'',
money:'',
desc:'',
}
}
onChange(key,v){
this.setState({
[key]:v
})
}
render(){
return (
<div>
{this.props.redirectTo?<Redirect to={this.props.redirectTo}></Redirect>:null}
<NavBar mode="dark">Boss完善信息页面</NavBar>
<AvatarSelector selectAvatar={(imagename)=>{
this.setState({
avatar:imagename
})
}}></AvatarSelector>
<InputItem onChange={(v)=>{this.onChange('title',v)}}>
招聘职位
</InputItem>
<InputItem onChange={(v)=>{this.onChange('company',v)}}>
公司名称
</InputItem>
<InputItem onChange={(v)=>{this.onChange('money',v)}}>
职位薪资
</InputItem>
<TextareaItem
title='职位要求'
rows={3}
autoHeight
onChange={(v)=>{this.onChange('desc',v)}}
>
</TextareaItem>
<Button onClick={()=>this.props.updata(this.state)} type='primary'>保存</Button>
</div>
)
}
}
export default BossInfo;
this is user.redux.js
import axios from "axios";
import { getRedirectPath } from '../util' ;
const AUTH_SUCCESS = 'AUTH_SUCCESS';
const ERROR_MSG = 'ERROR_MSG';
const LOAD_DATA = 'LOAD_DATA';
const initStatus={
redirectTo:'',
msg:'',
user:'',
type:'',
}
//reducer
export function user(state=initStatus,action){
switch(action.type){
case AUTH_SUCCESS:
return {...state,msg:'',redirectTo:getRedirectPath(action.data),...action.data}
case LOAD_DATA:
return {...state,...action.data}
case ERROR_MSG:
return {...state,isAuth:false,msg:action.msg}
default:
return state;
}
}
//action
function authSuccess(data){
return { type:AUTH_SUCCESS, data:data }
}
function errorMsg(msg){
return { type:ERROR_MSG, msg:msg }
}
export function register({user,pwd,repeatpwd,type}){
if(!user || !pwd){
return errorMsg('用户名密码必须输入！')
}
if(pwd!=repeatpwd){
return errorMsg('两次密码输入不一致！')
}
//redux-thunk支持返回函数的写法（这边是异步）
return dispatch =>{
axios.post('/user/register',{user,pwd,type}).then(res=>{
if(res.status==200&&res.data.code==0){
dispatch(authSuccess({user,pwd,type,_id:res.data.data._id}))
}else{
dispatch(errorMsg(res.data.msg))
}
})
}
}
export function login({user,pwd}){
if(!user || !pwd){
return errorMsg('用户名和密码不能为空！')
}
return dispatch =>{
axios.post('/user/login',{user,pwd}).then(res=>{
if(res.status==200 && res.data.code==0){
dispatch(authSuccess(res.data.data))
}else{
dispatch(errorMsg(res.data.msg))
}
})
}
}
export function loadData(userinfo){
return {type:LOAD_DATA,data:userinfo}
}
export function updata(data){
return dispatch=>{
axios.post('/user/updata',data)
.then(res=>{
if(res.status==200 && res.data.code==0){
dispatch(authSuccess(res.data.data))
}else{
dispatch(errorMsg(res.data.msg))
}
})
}
}
Why do you keep reporting this problem?Is this pointing in the wrong direction?Asking for help

Answer 1

The onChange function is executing on each render change the function to arrow function like
onChange=(key,v)=>{
v.stopPropagation();
this.setState({
[key]:v
})
}