React中如何调用两个API匹配用户名关联图片并组合展示数据

现有代码核心问题及修复方案 #

你当前的代码存在以下几处可直接导致运行错误的问题，对应修复逻辑如下：

1. API请求地址拼接错误
   DataItem组件中拼接dicebear头像地址时，错误使用了{{}}语法，没有用模板字符串正确插入用户名变量，同时URL中的换行和多余空格会导致请求地址无效。
2. 对API返回类型认知错误
   dicebear的头像接口直接返回SVG图片资源，而非JSON格式数据，调用response.json()会直接抛出解析错误。实际使用时无需主动fetch该地址，直接将拼接好的地址作为img标签的src属性值即可正常加载图片。
3. setState语法错误
   DataItem组件中执行setState时，你将allData对象的字段直接展开到了state根层级，破坏了原有state结构，后续读取this.state.allData下的字段会出现未定义错误。
4. 组件层级冗余且存在无意义遍历
   额外封装的DataImageItem、DataImage组件无存在必要，且针对单个图片字符串执行map操作会直接抛出类型错误，字符串本身不存在map方法。

修正后可运行代码 #

父组件DataList逻辑无问题，可直接沿用。
简化冗余组件后的DataItem代码如下，可直接删除原来的DataImageItem、DataImage组件：

import React, { Component } from "react";

export default class DataItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userData: this.props.allData,
      // 直接拼接头像地址即可，无需额外发起请求
      userAvatar: `https://avatars.dicebear.com/v2/avataaars/${this.props.allData.username}.svg?options[mood][]=happy`
    };
  }

  render() {
    return (
      <div className="card card-style">
        <div className=" card-horizontal">
          <div className="img-square-wrapper p-2">
            <img className="profile-img" src={this.state.userAvatar} alt={`${this.state.userData.name}的头像`} />
          </div>
          <div className="card-body card-body-style">
            <h2 className="card-title card-title-style">
              {this.state.userData.name}
            </h2>
            <div className="info">
              <p>
                <strong>邮箱: </strong>
                {this.state.userData.email}
              </p>
              <p>
                <strong>电话: </strong>
                {this.state.userData.phone}
              </p>
              <p>
                <strong>公司: </strong>
                {this.state.userData.company.name}
              </p>
              <p>
                <strong>网站: </strong>
                {this.state.userData.website}
              </p>
              <p>
                <strong>地址: </strong>
                {this.state.userData.address.street},{" "}
                {this.state.userData.address.suite},
                {this.state.userData.address.city},{" "}
                {this.state.userData.address.zipcode}
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

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