React组件加载动画只闪一下就消失了怎么办？

长孙焕焕提问于 2026-02-13 16:25:36 阅读 33

交互

我在React组件里用fetch请求数据时加了加载动画，按理说应该在数据返回前一直显示的，但实际效果是动画只闪一下就没了。我检查了代码，确实在请求开始时设置了loading为true，请求结束才设为false。但为什么动画显示时间这么短？

尝试过把loading状态初始化为true，然后在componentDidMount里先setState({loading: true})再调用fetch，但问题依旧。代码大致是这样的：


componentDidMount() {
  this.setState({ loading: true });
  fetch('/api/movies')
    .then(res => res.json())
    .then(data => {
      this.setState({ movies: data, loading: false });
    });
}

有时候甚至出现请求成功后loading状态没及时更新的情况，导致动画一直转。明明在then里改了状态啊，这是哪里出问题了？

加载状态

我来解答赞 5 收藏

反馈

2 条解答

爱学习的倩利 Lv1

问题出在异步状态更新上，setState不会立即生效，导致loading状态可能还没来得及渲染就变了。试试这个：

componentDidMount() {

  this.setState({ loading: true }, () => {

    fetch('/api/movies')

      .then(res => res.json())

      .then(data => {

        this.setState({ movies: data, loading: false });

      })

      .catch(error => {

        console.error('请求失败:', error);

        this.setState({ loading: false });

      });

  });

}

把fetch放进setState的回调里，确保状态真的更新了再发请求。另外记得处理错误情况，不然loading可能会卡住。我先去喝口咖啡提提神...

2026-02-17 20:14

慕容金利 Lv1

你的问题可能是异步状态更新导致的，React 的 setState 是异步的，可能会让 loading 状态看起来没生效。试试用 async/await 改写一下代码，确保状态更新和 fetch 逻辑顺序执行，应该能用。

async componentDidMount() {

  this.setState({ loading: true });

  try {

    const res = await fetch('/api/movies');

    const data = await res.json();

    this.setState({ movies: data, loading: false });

  } catch (error) {

    console.error('请求出错了', error);

    this.setState({ loading: false });

  }

}

另外，检查一下是不是父组件或者其他地方也改了 loading 状态，避免冲突。如果还是有问题，加个延时调试一下，看看状态到底什么时候变的。

2026-02-14 08:03