Question

我正在使用react，我试图在dom渲染时显示加载器。但我真的不确定为什么这种三元手术不起作用。我在这里做错了什么？

import React, { Component } from 'react';
import logo from './logo.svg';
class App extends React.Component 
{
        constructor()
        {
                super(); 
                this.state = {isLoading: true} 
                console.log(this.state.isLoading);
        }
        componentDidMount() 
        { 
                this.setState ({isLoading: false})
                console.log("componentDidMount");
        }
        render()
        {
                return(
                this.state.isLoading ? 
                <div><img src={logo} className="App-logo" alt="logo" /></div>
                : 
                <div> yourPage </div>
                )
        }
}
export default App;

每次都显示您的页面不显示徽标图像（加载程序图像）

Answer 1

这是......

在构造函数中创建一个具有默认TRUE值

的isLoading状态

constructor(props) {
   this.state = { 
       x: ...
       y: ...
       isLoading: true
     }
 }

更新ComponentDidMount

中的任何其他状态

ComponentDidMount() {
  ...
  this.setState { x: ... }
}

状态更改时，在ComponentDidUpdate中设置isLoading = False

ComponentDidUpdate(prevProps, prevState) {
    ...
    if (prevState.x !== this.state.x) {
        this.setState = { isLoading: false }   
    }
}

渲染您的Loader

...
<Loader active={this.state.isLoading} />

Answer 2

在组件安装完成后立即将isLoading状态设置为false。它会立即重新渲染并分别显示yourPage（重新渲染只需几毫秒）。

如果要在加载React应用程序之前设置加载程序，则需要直接在索引html文件中进行设置。例如，您有：

<body>
  <div id='root'> // In here you insert your React App component
    // Insert your loader down here
    // It will immediately disappear after React App is inserted
    // (You should use vanilla HTML + CSS - not ReactJS of course)
    // Example:
    <style>
      .my-app-loader {
        // css styles
      }
    </style>
    <div class='my-app-loader'></div>
  </div>
</body>

修改

如果要在等待服务器API响应时显示加载程序，则应根据请求状态更改isLoading状态。例如：

class App extends React.Component {
  ...
  componentWillMount() { 
    fetchSomeDataFromServer()
      .then((response) => {
        this.setState({isLoading: false})
        // Do what you need with that response data
      })
      .catch((error) => {
        // Handle error
      }
  }
  ...
}
export default App

Answer 3

你可以尝试这个，这将在几秒后设置你的状态：

import React, { Component } from 'react';
import logo from './logo.svg';
class App extends React.Component 
{
        constructor()
        {
                super(); 
                this.state = {isLoading: true} 
                console.log(this.state.isLoading);
        }
        componentDidMount() 
        { 
                setTimeout(() => this.setState({isLoading: false}), 3000)
            console.log("componentDidMount");
        }
        render()
        {
                if(this.state.isLoading){
                  return(
                    <div><img src={logo} className="App-logo" alt="logo" /></div>
                  )
                }
                return(
                  <div> yourPage </div>
                )
        }
}
export default App;

如果你只是想看看你的加载器（使用计时器），这是一个简单的问题，如果你想在获得API后实现它，你可以先在componentDidMount或componentWillMount中调用你的API。你有来自API的回复，你可以将你的州设置为假。

在该代码中，我实现的间隔与您从API获取响应的时间相同。如果你想从API获取数据，这是示例代码：

import React, { Component } from 'react';
import logo from './logo.svg';
class App extends React.Component 
{
        constructor()
        {
                super(); 
                this.state = {isLoading: true} 
                console.log(this.state.isLoading);
        }
        componentWillMount() { 
         fetchAPI()
           .then((response) => {
             this.setState({isLoading: false})
         })
         .catch((error) => {
             console.log('error = ', error)
          }
        }
        render()
        {
                if(this.state.isLoading){
                  return(
                    <div><img src={logo} className="App-logo" alt="logo" /></div>
                  )
                }
                return(
                  <div> yourPage </div>
                )
        }
}
export default App;

希望它可以帮助你，谢谢：）

React - loader并不起作用

3 个答案:

在构造函数中创建一个具有默认TRUE值

更新ComponentDidMount

状态更改时，在ComponentDidUpdate中设置isLoading = False

渲染您的Loader

修改