UseEffect挂钩在更新状态后执行多次

Question

我用creat-react-app创建一个react应用。在我的项目中使用Hooks和Context。 这段代码是我的loginView.js

function LoginView(props) {
    const classes = useStyles()
    const [Username, setUsername] = useState('');
    const [Password, setPassword] = useState('');
    const { getUserLogin, isLogin } = useContext(UserContext)
    const handelSubmit = (e) => {
        console.log(Username, Password)
        if (Username.length < 1) {
            alert("لطفا نام کاربری را وارد نمایید")
            if (Password.length < 1) {
                alert("لطفا رمز عبور را واردنمایید")
            }
        }
        let uuid = uuidv1()
        console.log(uuid)
        localStorage.setItem('myUUID', uuid)
        let xml = 'exampel xlm (srver is SOAP)';
        console.log(xml)
        getUserLogin(xml)
    }
    useEffect(() => {
        if (isLogin) {
            props.history.push("/MainPage")
        }
    }, [isLogin])
    return (
        <div style={{ direction: 'rtl', }}>
            <MyLogo />
            <div className={classes.root} >
                <div className='textfiled'>
                    <TextField
                        className={classes.txt}
                        name='username'
                        inputProps={{ style: { textAlign: 'center' } }}
                        onChange={(e) => setUsername(e.target.value)}
                        placeholder='نام کاربری' ></TextField>
                </div>
                <div >
                    <TextField
                        className={classes.txt}
                        inputProps={{ style: { textAlign: 'center' } }}
                        name='password'
                        type='password'
                        onChange={(e) => setPassword(e.target.value)}
                        placeholder='رمز عبور' ></TextField>
                </div>
                <div>
                    <Button color={'inherit'} className={classes.btn} onClick={() => handelSubmit()} > ورود</Button>
                </div>

            </div>
        </div>
    )
}
export default withRouter(LoginView);

这是我的上下文：

export const UserContext = createContext()
export const UserContextDispacher = createContext();
const UserProvider = (props) => {
    const [user, setUser] = useState({ username: '', password: '', })
    const [isLogin, setisLogin] = useState(false)
    const getUserLogin = (value) => {
        axios.post('https://exampel.com/myexampel.asmx', value, { headers: { 'Content-Type': 'text/xml;charset=UTF-8' } }).then(function (response) {
           // console.log(response)
            var options = {
                attributeNamePrefix: "@_",
                attrNodeName: "attr", //default is 'false'
                textNodeName: "#text",
                ignoreAttributes: true,
                ignoreNameSpace: false,
                allowBooleanAttributes: false,
                parseNodeValue: true,
                parseAttributeValue: false,
                trimValues: true,
                cdataTagName: "__cdata", //default is 'false'
                cdataPositionChar: "\\c",
                localeRange: "", //To support non english character in tag/attribute values.
                parseTrueNumberOnly: false,
                attrValueProcessor: a => he.decode(a, { isAttributeValue: true }),//default is a=>a
                tagValueProcessor: a => he.decode(a) //default is a=>a
            };
            // Intermediate obj
            var tObj = parser.getTraversalObj(response.data, options);
            var jsonObj = parser.convertToJson(tObj, options);
            //set Token
            var token = jsonObj["soap:Envelope"]["soap:Body"].AuthenticateUserResponse.Token
            var authResult = jsonObj["soap:Envelope"]["soap:Body"].AuthenticateUserResponse.AuthenticateUserResult
            if (authResult != false) {
                localStorage.setItem('mytoken', token)
                localStorage.setItem('myisLogin', authResult)
                setisLogin(true)
            } else {
                localStorage.setItem('myisLogin', authResult)
                setisLogin(false)
            }
            return authResult
        }).catch(function (error) {
          //  console.log("erorr in send to login : " + error)
        })
    }
    return (
        <UserContext.Provider value={{ user, getUserLogin, isLogin }}>
            <UserContextDispacher.Provider>
                {props.children}
            </UserContextDispacher.Provider>
        </UserContext.Provider>
    )
}
export default withRouter(UserProvider);

在useEffect控制台中登录（单击提交按钮）后。log（isLogin）多次（25次!!）这是我的控制台的屏幕截图

并收到此错误：已超过最大更新深度。 我读了这些帖子，但没有回答 useEffect React Hook rendering multiple times with async await (submit button)

为什么会这样？  更新 这是我的App.js文件：

 return (
    <UserProvider>
      <div className={classes.root} >

        <Route exact path="/" component={LoginView} />
        <CarsContextProvider>
        <InfoContextProvider>
            <Switch>
              {
                routersMyCard.map((route) => (
                  route.private ? <PrivateRoute {...route} /> :
                    <Route {...route} />
                ))
              }
            </Switch>
            </InfoContextProvider>
        </CarsContextProvider>

        <AddToHomescreen title={'برای استفاده بهتر از این برنامه اینجا را کلیک کنید و مراحل را دنبال نمایید'} onAddToHomescreenClick={handleAddToHomescreenClick} />
      </div>
    </UserProvider>
  );

这是我的私人溃败：

const isLoginLocal = localStorage.getItem('myisLogin')
function PrivateRoute(props) { 
    return isLoginLocal? <Route {...props}/> : <Redirect to="/"/>
}