React中componentDidMount内setState后render获取空数组问题（Google Places API场景）

嘿，我来帮你搞定这个问题！你遇到的核心问题是异步请求的时序处理不当，加上循环里直接操作数组并setState的方式有问题，导致render的时候state还没被正确填充。另外关于“Cannot set state inside componentDidMount”的提示，这其实是ESLint的规则警告（react/no-did-mount-set-state），虽然在componentDidMount里setState是合法的（会触发一次额外渲染，但这类场景下是必要的），不过我们可以通过优化代码同时解决这两个问题。

问题根源拆解 #

你在循环里发起获取地点详情的异步请求，然后直接push到数组再setState，但异步请求是并行执行的——当你调用setState时，大部分请求还没返回结果；再加上闭包问题，每次push操作的都是初始的空数组，最后state里的rows自然还是空的。

修复方案 #

我们需要等待所有地点详情的请求都完成后，再统一设置state，这样就能保证render时数组已经被正确填充。

方案1：用Promise.all批量处理异步请求 #

把每个获取详情的请求包装成Promise，通过Promise.all等待所有请求完成后再更新state：

import React, { Component } from 'react';

class PlaceList extends Component {
  state = {
    rows: []
  };

  componentDidMount() {
    // 第一步：获取20条地点列表数据
    fetch('你的Google Place Search API地址')
      .then(res => res.json())
      .then(listData => {
        const placesList = listData.results; // 假设接口返回的列表存在results字段中
        
        // 为每个地点生成获取详情的Promise
        const detailPromises = placesList.map(place => {
          return fetch(`你的Google Place Details API地址?place_id=${place.place_id}`)
            .then(res => res.json())
            .then(detailData => {
              // 整理你需要的详情字段
              return {
                id: place.place_id,
                name: detailData.result.name,
                address: detailData.result.formatted_address
                // 其他你需要的字段
              };
            });
        });

        // 等待所有详情请求完成后更新state
        Promise.all(detailPromises)
          .then(completeDetails => {
            this.setState({ rows: completeDetails });
          })
          .catch(err => {
            console.error('获取地点详情失败:', err);
          });
      })
      .catch(err => {
        console.error('获取地点列表失败:', err);
      });
  }

  render() {
    return (
      <div>
        {this.state.rows.length > 0 ? (
          this.state.rows.map(row => (
            <div key={row.id} className="place-item">
              <h3>{row.name}</h3>
              <p>{row.address}</p>
            </div>
          ))
        ) : (
          <p>加载中...</p>
        )}
      </div>
    );
  }
}

export default PlaceList;

方案2：用async/await让代码更简洁 #

如果你习惯用async/await语法，代码可读性会更高：

import React, { Component } from 'react';

class PlaceList extends Component {
  state = {
    rows: []
  };

  async componentDidMount() {
    try {
      // 获取地点列表
      const listRes = await fetch('你的Google Place Search API地址');
      const listData = await listRes.json();
      const placesList = listData.results;

      // 批量获取所有地点详情
      const completeDetails = await Promise.all(
        placesList.map(async place => {
          const detailRes = await fetch(`你的Google Place Details API地址?place_id=${place.place_id}`);
          const detailData = await detailRes.json();
          return {
            id: place.place_id,
            name: detailData.result.name,
            address: detailData.result.formatted_address
          };
        })
      );

      // 统一更新state
      this.setState({ rows: completeDetails });
    } catch (err) {
      console.error('请求过程出错:', err);
    }
  }

  render() {
    return (
      <div>
        {this.state.rows.length > 0 ? (
          this.state.rows.map(row => (
            <div key={row.id} className="place-item">
              <h3>{row.name}</h3>
              <p>{row.address}</p>
            </div>
          ))
        ) : (
          <p>加载中...</p>
        )}
      </div>
    );
  }
}

export default PlaceList;

额外提示 #

1. 关于componentDidMount里setState的警告：如果你想消除这个ESLint提示，可以在项目的ESLint配置中修改react/no-did-mount-set-state规则为警告级别，或者直接忽略——因为在数据请求后更新state是合理的场景。
2. Google Places API有请求配额限制，一次性请求20条详情可能会触发配额上限，记得检查你的API密钥配额情况。

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