Javascript 是否正在加载未在React.js表单组件中呈现的组件？

我希望在提取请求时呈现此加载程序。我有一个

组件，但它似乎没有渲染？我的逻辑正确吗

我在整个表单中添加了一些注释

import React, { Component } from 'react'
import { Loader, Transition, Button, Form, Grid, Header, Message, Segment } from 'semantic-ui-react'
import Link from 'next/link';
import Router from 'next/router'
import { login } from 'next-authentication'

import { connect } from 'react-redux'


class LoginForm extends Component {
 constructor(props) {
  super(props)

  this.state = {
   isLoading: true, // other state has been omitted for brevity, but I set to true here...
  }

  this.handleChange = this.handleChange.bind(this)
  this.handleBlur = this.handleBlur.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)

 }

 componentDidMount() {
  this.setState({ isLoading: false }) // when my component mounts the first time, its set to false.
 }



 handleSubmit(event) {
  this.setState({
   isLoading: true // then I set it to true again when the submit is called
  })

  event.preventDefault();

  var error = false;

  var { username, password, isLoading } = this.state

  var mailFormat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/


  if (!username.match(mailFormat)) {
   this.setState({ usernameError: true });
   error = true;
  } else {
   this.setState({ usernameError: false });
  }

  if (password.length < 8) {
   this.setState({ passwordError: true });
   error = true;
  } else {
   this.setState({ passwordError: false })
  }

  if (error) {
   this.setState({ formSuccess: false });
   return;
  }

  {console.log("isLoading 1", isLoading)}


  return window.fetch('http://localhost:8016/users/login', {
   method: 'POST',
   headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
   body: JSON.stringify({ username, password })
  })
   .then((response) => {
    if (response.ok) {

     const { token } = response.clone();

     const loginOptions = {
      token,
      cookieOptions: { expires: 1 },
      callback: () => Router.push('/profile')
     }
     setTimeout(() => {
      login(loginOptions)
     }, 5000)

     this.setState({
      username: username, password: '', formError: false, formSuccess: true, isLoading:false
     }) // set back to false because it should be finished as I've gotten my response

    } else if (!response.ok) {
     if (response.status === 404) {
      console.log("response.status ", response.status);
      {console.log("isLoading 2", isLoading)}
      this.setState({
        formError: true, formSuccess: false, isLoading:false // same here
      });
      return;
     }
    }
    return response;
   })
   .catch(err => console.dir(err))
 }

 render() {
  var { username, password, usernameError, passwordError, formSuccess, formError, duration, isLoading } = this.state;

  const { state} = this.props;


  // (formSuccess === true) ? state.isLoggedIn = true : state.isLoggedIn = false;

  return (<div className='login-form'> {

  }<style>{`body > div, body > div > div, body > div > div > div.login-form { height: 100%;}`} </style>

   <Grid textAlign='center'
    style={{ height: '100%' }}
    verticalAlign='middle' >
    <Grid.Column style={{ maxWidth: 450 }}>
     <Header as='h2'
      color='teal'
      textAlign='center'>
      Log-in to your account
     </Header>

     <Form size='large'
      onSubmit={this.handleSubmit}
      error={ formError}>


      <Segment stacked>
       <Form.Input fluid icon='user'
        iconPosition='left'
        placeholder='E-mail address, e.g. joe@schmoe.com'
        name='username'
        value={username}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        error={usernameError}
       />

       <Transition visible={usernameError}
        animation='scale'
        duration={duration}>
        <Message error content='username_Email is in incorrect format e.g. joe@schmoe.com' />
       </Transition>

       <Form.Input fluid icon='lock'
        iconPosition='left'
        placeholder='Password'
        name='password'
        value={password}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        error={passwordError}
       />

       <Transition visible={passwordError}
        animation='scale'
        duration={duration}>
        <Message error content='Password is incorrect, please try again.' />
       </Transition>

       <Button color='teal'
        fluid size='large'
        disabled={!username || !password}>
        Log-in
       </Button>

       {isLoading
        ? <Loader> Loading </Loader> //shouldn't it fire here?
        : <Transition visible={ formError}
         unmountOnHide={true}
         animation='scale'
         duration={duration}>
         <Message
          error
          centered="true" header='This email does not exist...'
          content='Please re-enter another email address, or  click the link below to register.' />
        </Transition>
       }

       {isLoading 
        ? <Loader> Loading </Loader> //shouldn't it fire here?
        : <Transition visible={formSuccess}
         unmountOnHide={true}
         animation='scale'
         duration={duration}>
         <Message
          success
          header='Your have successfully logged in.'
          content='Welcome to Hillfinder!' />
        </Transition>
       }
      </Segment>
     </Form>

     {formError ?
      <Transition visible={formError}
       animation='scale'
       duration={1000}>
       <Message>
        <Link href="/register">
         <a>Register</a>
        </Link> </Message>
      </Transition>
      : null
     }
    </Grid.Column> </Grid> </div>
  )
 }
}

const mapStateToProps = state => {
 return {
  state
 }
}

export default connect(mapStateToProps)(LoginForm)

import React，{Component}来自“React”
从“语义ui”导入{Loader、Transition、Button、Form、Grid、Header、Message、Segment}
从“下一个/链接”导入链接；
从“下一个/路由器”导入路由器
从“下一次身份验证”导入{login}
从“react redux”导入{connect}
类LoginForm扩展组件{
建造师（道具）{
超级（道具）
此.state={
isLoading:true，//为了简洁起见，省略了其他状态，但我在这里设置为true。。。
}
this.handleChange=this.handleChange.bind（this）
this.handleBlur=this.handleBlur.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
componentDidMount（）{
this.setState（{isLoading:false}）//当我的组件第一次装载时，它被设置为false。
}
handleSubmit（事件）{
这是我的国家({
isLoading:true//然后在调用submit时再次将其设置为true
})
event.preventDefault（）；
var错误=错误；
var{username，password，isLoading}=this.state
var mailFormat=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]+]$/
如果（！username.match（mailFormat））{
this.setState（{usernamererror:true}）；
错误=真；
}否则{
this.setState（{usernamererror:false}）；
}
如果（密码长度<8）{
this.setState（{passwordError:true}）；
错误=真；
}否则{
this.setState（{passwordError:false}）
}
如果（错误）{
this.setState（{formSuccess:false}）；
返回；
}
{console.log（“isLoading 1”，isLoading）}
返回窗口。获取（'http://localhost:8016/users/login', {
方法：“POST”，
标题：{'Accept'：'application/json'，'Content Type'：'application/json'}，
正文：JSON.stringify（{username，password}）
})
。然后（（响应）=>{
if（response.ok）{
const{token}=response.clone（）；
常量登录选项={
代币
cookieOptions:{expires:1}，
回调：（）=>Router.push（“/profile”）
}
设置超时（（）=>{
登录（登录选项）
}, 5000)
这是我的国家({
用户名：用户名，密码：“”，formError:false，formSuccess:true，isLoading:false
})//设置回false，因为它应该在我得到响应时完成
}否则，如果（！response.ok）{
如果（response.status==404）{
日志（“response.status”，response.status）；
{console.log（“isLoading 2”，isLoading）}
这是我的国家({
formError:true，formSuccess:false，isLoading:false//此处相同
});
返回；
}
}
返回响应；
})
.catch（err=>console.dir（err））
}
render（）{
var{username，password，usernamererror，passwordError，formSuccess，formError，duration，isload}=this.state；
const{state}=this.props；
//（formSuccess==true）？state.isLoggedIn=true:state.isLoggedIn=false；
报税表（{
}{`body>div，body>div>div，body>div>div>div.login-form{height:100%；}`}
登录到您的帐户
登录
{孤岛加载
装货//这里不应该着火吗？
: 
}
{孤岛加载
装货//这里不应该着火吗？
: 
}
{formError？
登记
：null
}
)
}
}
常量mapStateToProps=状态=>{
返回{
状态
}
}
导出默认连接（MapStateTops）（LoginForm）

您忘记使用加载程序的

活动
道具。应该是这样的：

{isLoading
        ? <Loader active> Loading </Loader> //It'll be spinning now
       // ...
}

{isLoading
？正在加载//它现在正在旋转
// ...
}
您忘记使用加载程序的
活动
道具。应该是这样的：

{isLoading
        ? <Loader active> Loading </Loader> //It'll be spinning now
       // ...
}

{isLoading
？正在加载//它现在正在旋转
// ...
}
哦，是的！对不起，忘了加那个！哦，是的！对不起，忘了加那个！（皮卡德掌心）谢谢我的朋友@AntonioPavicevac Ortiz不客气伙计。我也这么做了很多次（皮卡德脸掌）谢谢我的朋友@AntonioPavicevac Ortiz不客气伙计。我也这样做过很多次