如何在componentDidMount中获取this.props.comic.id？当前返回undefined

核心问题分析 #

componentDidMount执行时，this.props.comic还未完成赋值，导致id为undefined；而componentDidUpdate能拿到正确值，但直接在此处执行fetch并setState会触发组件重复更新，形成无限循环。

可行解决方案 #

通过在componentDidUpdate中添加props变化判断，仅当comic.id发生改变时才调用API，同时在componentDidMount中处理初始渲染时comic.id已存在的情况：

1. 封装API调用为独立方法，便于复用
2. 在componentDidMount中判断初始comic.id是否存在，存在则调用API
3. 在componentDidUpdate中对比前后comic.id，仅当变化时执行API调用

完整代码示例

class YourComponent extends React.Component {
  // 封装API调用逻辑
  async fetchComicStatus() {
    try {
      const accessToken = sessionStorage.getItem("access_token");
      if (!accessToken) return;

      const response = await fetch(
        `${origin_url_be}/api/user/comic/check?id_comic=${this.props.comic.id}`,
        {
          method: 'get',
          headers: {
            'Authorization': `bearer ${accessToken}`,
            'Content-Type': 'application/json',
          },
        }
      );
      const data = await response.json();
      
      this.setState({
        isLike: data.result.isLike,
        isFollow: data.result.isFollow,
      });
      console.log(data);
    } catch (error) {
      console.error('获取漫画状态失败:', error);
    }
  }

  async componentDidMount() {
    // 初始渲染时如果comic.id已存在，直接调用API
    if (this.props.comic?.id) {
      await this.fetchComicStatus();
    }
  }

  componentDidUpdate(prevProps) {
    // 仅当comic.id发生变化时才执行API调用
    const currentComicId = this.props.comic?.id;
    const prevComicId = prevProps.comic?.id;
    
    if (currentComicId && currentComicId !== prevComicId) {
      this.fetchComicStatus();
    }
  }

  // ...其他组件逻辑
}

关键说明 #

• 使用componentDidUpdate的prevProps参数对比前后comic.id，避免不必要的API调用和无限循环
• 可选链操作符?.用于防止this.props.comic为undefined时触发报错
• 将API逻辑封装为独立方法，提高代码复用性和可维护性

内容的提问来源于stack exchange，提问作者Văn Hào Trương