React中获取接口对象数据推入数组的异步问题解决

你现在的写法有两个核心问题：

1. render里不能直接处理异步逻辑：render是同步执行的，你调用getData()返回的是Promise，then里的代码会在render结束后才执行，这时候修改fields数组不仅不会触发组件重新渲染，而且你一开始打印fields的时候它确实是空的——浏览器console展开后能看到内容是因为它会追踪数组的引用更新，但代码里根本拿不到异步回来后的数据。
2. 没有用React状态管理数据：React类组件必须通过state来管理需要渲染的数据，只有通过setState更新状态，组件才会重新渲染并展示最新数据。

正确实现步骤 #

1. 给组件添加state，用来存储接口返回的数据、加载状态、错误信息
2. 在componentDidMount钩子（组件挂载后执行）里调用异步接口获取数据，拿到数据后更新state
3. 在render里根据状态渲染内容：加载中显示提示，出错显示错误，数据加载完成后把对象的键值对转换成数组并展示

修正后的代码 #

class DetailsPage extends React.Component<DetailProps> {
  // 初始化组件状态
  state = {
    data: null,
    loading: true,
    error: null
  };

  async getData() {
    try {
      const data = await Dependencies.backend.getList(this.props.url);
      // 拿到数据后更新state，触发组件重新渲染
      this.setState({
        data,
        loading: false
      });
    } catch (err) {
      this.setState({
        error: "获取数据失败",
        loading: false
      });
      console.error("请求错误:", err);
    }
  }

  // 组件挂载后发起异步请求
  componentDidMount() {
    this.getData();
  }

  render() {
    const { data, loading, error } = this.state;

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

    // 错误状态
    if (error) {
      return <div>{error}</div>;
    }

    // 数据加载完成，把对象转换成[key, value]的数组
    const fields = Object.entries(data);

    return (
      <div>
        <h1>Hoi!</h1>
        <div className="detail-fields">
          {fields.map(([key, value], index) => (
            <div key={index}>
              <span>*{key}*: </span>
              <span>`{String(value)}`</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

关键说明 #

• 用Object.entries(data)直接把对象转换成[[键1, 值1], [键2, 值2]]的数组，比手动推数组更简洁
• 通过componentDidMount发起请求，符合React类组件的生命周期规范
• 增加了加载和错误状态，提升用户体验
• 只有当state更新时，组件才会重新渲染，确保页面能展示最新的接口数据

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