React中使用async/await时函数未调用及无限循环问题

嘿，咱来拆解下你遇到的这些坑——其实都是React渲染逻辑和异步操作搭配时的典型问题，一步步来解决：

先复盘你踩过的雷 #

1. 函数没执行的问题：你最初在render里写{() => {this.fetchImages(id)}}，这只是在JSX里定义了一个匿名函数，但根本没调用它，所以请求自然发不出去；
2. 无限循环的问题：后来你直接在render里调用test(id)，而test里又调用了setState——React里setState会触发组件重新渲染，渲染又会调用test，test又setState，直接陷入死循环；
3. 多次点击不同ID的问题：每次点击不同ID都要发起新请求，还得避免旧请求的结果覆盖新请求的数据，这个得做请求取消处理。

正确的解决方案思路 #

核心原则：异步请求永远不要放在render函数里执行，应该放在「触发模态框打开的事件回调」里，也就是你的showModal方法——只有当用户主动点击按钮打开模态框时，才发起请求，而不是每次组件渲染都触发。

第一步：完善组件状态 #

先在组件的state里定义需要的状态：

state = {
  modalOpen: null, // 控制模态框是否打开，存储当前的document/id
  imageData: [], // 存储请求到的图片数据
  isLoading: false, // 请求加载状态
  requestError: null // 请求错误信息
};

第二步：重构showModal和fetchImages方法 #

把请求逻辑移到showModal里，同时用AbortController处理多次点击的请求取消：

// 封装异步请求，支持取消
fetchImages = async (id, signal) => {
  try {
    const response = await fetch(`你的图片接口地址/${id}`, { signal });
    if (!response.ok) throw new Error('请求失败');
    return await response.json();
  } catch (e) {
    // 忽略取消请求的错误
    if (e.name !== 'AbortError') {
      console.error('加载图片失败:', e);
      throw e;
    }
  }
};

// 打开模态框的方法，同时发起请求
showModal = async (document) => {
  const id = document?.id; // 从document里拿到你需要的id
  if (!id) return;

  // 取消之前的请求（如果有的话）
  if (this.abortController) {
    this.abortController.abort();
  }
  this.abortController = new AbortController();

  try {
    // 先设置加载状态，打开模态框
    this.setState({
      modalOpen: document,
      isLoading: true,
      requestError: null
    });

    // 发起请求
    const imageData = await this.fetchImages(id, this.abortController.signal);
    // 请求成功后更新数据
    this.setState({
      imageData: imageData || [],
      isLoading: false
    });
  } catch (e) {
    this.setState({
      isLoading: false,
      requestError: '加载图片失败，请稍后重试'
    });
  }
};

// 关闭模态框时清理请求
closeModal = () => {
  if (this.abortController) {
    this.abortController.abort();
    this.abortController = null;
  }
  this.setState({
    modalOpen: null,
    imageData: [],
    isLoading: false,
    requestError: null
  });
};

第三步：重构renderModal方法 #

现在renderModal只负责渲染UI，不再处理异步逻辑：

renderModal = () => {
  const { modalOpen, imageData, isLoading, requestError } = this.state;
  if (!modalOpen) return null;

  return (
    <Modal 
      open={!!modalOpen} 
      onClose={this.closeModal} 
      little 
      showCloseIcon={true} 
      styles={modalStyles}
    >
      <div className="item">
        {/* 模态框原有内容 */}
        <h3>{modalOpen.title || '详情'}</h3>
        
        {/* 请求状态展示 */}
        {isLoading && <p>图片加载中...</p>}
        {requestError && <p style={{ color: 'red' }}>{requestError}</p>}
        
        {/* 图片数据展示 */}
        {!isLoading && !requestError && (
          <div>
            {Array.isArray(imageData) && imageData.length > 0 ? (
              imageData.map((item, key) => (
                <p key={key}>
                  Device name: {item.name}, En device name: {item.name.en_US}
                </p>
              ))
            ) : (
              <p>暂无图片数据</p>
            )}
          </div>
        )}
      </div>
    </Modal>
  );
};

第四步：触发按钮保持不变 #

你的按钮点击逻辑不用改，还是调用showModal：

<button onClick={() => {this.showModal(documents[0])}}>{translate('show_more')} »</button>

关键知识点总结 #

1. 避免render里执行异步操作：render是纯函数，每次组件状态/ props变化都会触发，在里面调用setState必然导致无限循环；
2. 请求取消机制：用AbortController可以在用户点击新的按钮时，取消之前未完成的请求，避免旧数据覆盖新数据；
3. 状态管理：加上加载、错误状态，给用户明确的反馈，提升体验；
4. 模态框打开时机：只有当用户主动触发打开时才发起请求，而不是组件渲染时就触发。

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