Question

通过这个简单的例子：

import React, { Component } from "react";
import axios from "axios";

class App extends Component {
  state = {
    items: [],
    loading: false
  };

  componentDidMount = async () => {
    this.setState({ loading: true });
    try {
      const { data } = await axios.get(
        "https://jsonplaceholder.typicode.com/users"
      );
      this.setState({ items: data, loading: false });
    } catch (error) {
      console.log(error);
    }
  };

  render() {
    return this.state.loading ? (
      <p>loading...</p>
    ) : (
      this.state.items.map(i => <p key={i.id}>item</p>)
    );
  }
}

export default App;

在这里，我将加载标志初始化为false，因此第一次呈现组件时，我们将看到呈现为空的数组，直到调用componentDidMount并显示“ loading”为止。这是一个简单的示例，因此也许在这里无关紧要，但是我有些情况下我不希望这种情况发生。

一个简单的解决方案是将初始标志值设置为true，但是我不知道这是否合适。也许还有另一种更好的方法来解决这个问题。

谢谢！

Answer 1

只需初始设置loading: true。没关系。

我应该如何在反应中初始化加载标志？

1 个答案: