React组件无法等待爬虫数据加载，求解决方案

我之前也碰到过一模一样的问题，React 的 constructor 确实不会等待异步操作完成，而且依赖全局数组存数据也很容易引发状态不同步的坑，给你几个可行的解决方案：

先说说你代码的问题所在 #

• constructor 是组件初始化的同步钩子，会在组件挂载前立刻执行，不管 getLinks() 是不是异步爬取数据，它都会直接往下执行 this.content = results1[1]，这时候数据还没加载完，results1 里自然没有你要的内容。
• 全局数组 results1 脱离了 React 的状态管理体系，就算数据后来加载完成了，组件也感知不到变化，不会自动重新渲染展示最新数据。

方案1：类组件用生命周期+状态管理（适配你的原有写法） #

把数据存在组件的 state 里，在 componentDidMount 这个专门处理初始化异步操作的生命周期钩子中执行爬取，拿到数据后更新 state，组件会自动重新渲染：

class Page extends React.Component {
  constructor(props) {
    super(props);
    // 初始化组件状态
    this.state = {
      content: null,
      loading: true // 加个加载状态，提升用户体验
    };
  }

  async componentDidMount() {
    try {
      // 假设把getLinks改成返回Promise的异步函数（后面会说怎么改）
      const results = await getLinks();
      // 更新状态，触发组件重新渲染
      this.setState({
        content: results[1],
        loading: false
      });
    } catch (error) {
      console.error('爬取数据出错:', error);
      this.setState({ loading: false });
    }
  }

  render() {
    const { content, loading } = this.state;
    if (loading) {
      return <div>加载中...</div>;
    }
    return <div>{content}</div>;
  }
}

方案2：改用函数组件+useEffect（更推荐，React官方现在主推这个） #

如果可以的话，换成函数组件写法会更简洁，用 useState 存状态，useEffect 处理异步副作用：

import { useState, useEffect } from 'react';

function Page() {
  const [content, setContent] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const results = await getLinks();
        setContent(results[1]);
        setLoading(false);
      } catch (error) {
        console.error('爬取数据失败:', error);
        setLoading(false);
      }
    };

    fetchData();
    // 可选：添加清理函数，避免内存泄漏（比如取消未完成的请求）
    return () => {
      // 这里可以写取消异步请求的逻辑，比如AbortController
    };
  }, []); // 空数组表示只在组件挂载时执行一次

  if (loading) {
    return <div>加载中...</div>;
  }

  return <div>{content}</div>;
}

额外要改的地方：重构getLinks() #

你原来的 getLinks() 是往全局数组塞数据，得改成返回 Promise 的形式，这样才能用 await 等待结果：

// 原来的写法（依赖全局数组）
let results1 = [];
function getLinks() {
  fetch('目标网址')
    .then(res => res.json())
    .then(data => {
      results1.push(data);
    });
}

// 修改后（返回Promise）
function getLinks() {
  return fetch('目标网址')
    .then(res => res.json())
    .then(data => {
      // 这里返回你原本要放进results1的结果数组
      return [/* 处理好的爬取数据 */];
    });
}

内容的提问来源于stack exchange，提问作者Siarhei Zhuk