×超过最大更新深度

Question

超过了最大更新深度。当组件重复调用组件WillUpdate或组件DidUpdate中的setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

这是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;

这是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))
                }
            })
    }
}

你为什么一直报告这个问题？这是指向错误的方向吗？寻求帮助

Answer 1

onChange 函数在每次渲染时执行，将函数更改为箭头函数，如

    onChange=(key,v)=>{
     v.stopPropagation();
        this.setState({
            [key]:v
      })
}