Question

我想加载页面屏幕。我的应用程序是主要组件。我有这样的事情：

class App extends Component {
   state = {isLoading: true}

   componentDidMount() {
      this.props.fetchUser();
      this.setState({ isLoading: false });
   }

   render() {
   if (this.state.isLoading) return <h1>Im loading the page</h1>;
   return (
      //MY MAIN PAGE
      );
   }
}

似乎它不起作用，因为我正在加载页面＆＃39;文字永远不会出现。

Answer 1

这是因为在组件挂载后立即调用componentDidMount，这会将isLoading状态设置为false。因此，您永远不会看到加载文本。通过查看您的代码，您似乎希望在获取用户时显示加载文本。在这种情况下，从fetchUser函数返回一个promise并在获取用户时解析该promise，然后将isLoading state设置为false

componentDidMount() {
      this.props.fetchUser().then(() => {
         this.setState({ isLoading: false });
      })
   }

Answer 2

你的逻辑听起来似乎在这里，我相信你只需要放弃if-else三元运算符?。根据{{3}}：

if-else语句在JSX中不起作用。这是因为JSX只是函数调用和对象构造的语法＆gt;糖。

在render()：

中尝试这样的事情

render() {

  let component = this.state.isLoading ? <h1>I'm loading the page</h1> : // your app JSX;

  return component;
}

您似乎没有正确初始化state。对于作为有状态类编写的React组件，您需要提供constructor()函数来初始化state。像这样：

class App extends Component {
  constructor() {
    super();
    this.state = { isLoading: true };
  }

  // rest of component code
  // your constructor should be written first
}

更多信息React docs。

加载页面反应

2 个答案: