如何對兩個不同的API進行fetch呼叫，并將第一個的用戶名與第二個的相應用戶名相匹配？-有解無憂

API 'A' 會給我用戶名。API 'B' 會給我影像。我必須將從 API 'A' 獲得的用戶名作為引數傳遞給 API 'B'，然后 API 'B' 將回傳分配給該用戶名的影像。

然后我必須顯示來自 API 'A' 的所有資訊以及來自 API 'B' 的影像。

這是我嘗試過的：

父組件

  import DataItem from "./DataItem";
  import React, { Component } from "react";

  export default class DataList extends Component {
   constructor(props) {
     super(props);

     this.state = {
     data: [],
     };

     console.log("constructor datalist");
    }

   componentDidMount = async () => {
     var response = await 
     fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
      });
     var information = await response.json();
     console.log("did mount datalist", information);
     this.setState({ data: information });
    };


    render() {
      console.log("render datalist");
      return (
       <ul>
           {this.state.data.map((info) => {
             return (
              <li key={info.username}>
                <DataItem allData={info} />
              </li>
             );
            })}
       </ul>
      );
     }

     componentDidCatch(error, info) {
     //console.log("componentDidCatch ", error, info);
      localStorage.lastError = `${error}\n 
      ${JSON.stringify(info)}`;
     }
     }

孩子

import React, { Component } from "react";
import DataImageItem from "./DataImageItem";

export default class DataItem extends Component {
constructor(props) {
 super(props);

 this.state = {
  allData: { userData: this.props.allData, userImage: [] },
 };
 console.log("constructor dataitem ", this.state.allData);
 }

 componentDidMount = async () => {
  var response = await fetch(
  "https://avatars.dicebear.com/v2/avataaars/
  {{this.state.allData.userData.username}}.
   svg?options[mood][]=happy",
  {
    method: "GET",
  }
 );
var information = await response.json();
console.log("didmount dataitem", information);
this.setState({ ...this.state.allData, userImage: information 
});
 };

  render() {
  console.log("render DataItem");
   return (
  <div className="card card-style">
    <div className=" card-horizontal">
      {this.state.allData.userImage.map((info) => {
        return <DataImageItem cardDataImage={info} />;
      })}
      <div className="card-body card-body-style">
        <h2 className="card-title card-title-style">
          {this.state.allData.userData.name}
        </h2>
        <div className="info">
          <p>
            <strong>Email: </strong>
            {this.state.allData.userData.email}
          </p>
          <p>
            <strong>Phone: </strong>
            {this.state.allData.userData.phone}
          </p>
          <p>
            <strong>Company: </strong>
            {this.state.allData.userData.company.name}
          </p>
          <p>
            <strong>Website: </strong>
            {this.state.allData.userData.website}
          </p>
          <p>
            <strong>Address: </strong>
            {this.state.allData.userData.address.street},{" "}
            {this.state.allData.userData.address.suite},
            {this.state.allData.userData.address.city},{" "}
            {this.state.allData.userData.address.zipcode}
          </p>
        </div>
      </div>
    </div>
  </div>
);
}
}

資料項的子項

import React, { Component } from "react";
import DataImage from "./DataImage";

 export default class DataImageItem extends Component {
 constructor(props) {
   super(props);
   this.state = {
    cardDataImage: this.props.cardDataImage,
   };
 }

 render() {
   return (
     <div className="img-square-wrapper p-2">
       {this.state.cardDataImage.map((image) => {
         return <DataImage imageData={image} />;
        })}
     </div>
  );
 }
}

DataImageItem 的子項

import React, { Component } from "react";
export default class DataImage extends Component {
 constructor(props) {
   super(props);

    this.state = {
     imageData: this.props.imageData,
   };
 }
  render() {
   return <img className="profile-img" src= 
    {this.state.imageData} alt="" />;
  }
 }

uj5u.com熱心網友回復：

"https://avatars.dicebear.com/v2/avataaars/
  {{this.state.allData.userData.username}}.
   svg?options[mood][]=happy"

應該

`https://avatars.dicebear.com/v2/avataaars/
  ${this.state.allData.userData.username}.
   svg?options[mood][]=happy`

您正在基本 javascript 字串中使用反應模板字串。所以 {{t??his.state.allData.userData.username}} 是按字面發送的。

uj5u.com熱心網友回復：

在componentDidMount您的DataItem組件中，您希望注入或動態包含從父組件接收的值作為 a prop，這可以使用模板文字來完成，其中您將字串值放在反引號內而不是單引號或雙引號（'， "")，這將使您能夠使用${}語法注入值。
此外，您正在嘗試將image陣列設定為陣列，然后嘗試在組件中對其進行映射DataItem。由于您已經在父組件中進行了映射，因此將為每個專案呈現子組件及其子組件，因此最好設定userImage屬性直接添加到影像 URL 并將資料向下發送到其他子組件。所以你可以componentDidMount在你的DataItem組件中洗掉。

import React, { Component } from "react";
import DataImageItem from "./DataImageItem";

export default class DataItem extends Component {
  constructor(props) {
  super(props);
  this.state = {
   allData: { userData: this.props.allData, userImage: 
    `https://avatars.dicebear.com/v2/avataaars/
    ${this.state.allData.userData.username}.svg?options[mood][]=happy` },
   };
   console.log("constructor dataitem ", this.state.allData);
  }
  render() {
  console.log("render DataItem");
   return (
  <div className="card card-style">
    <div className=" card-horizontal">
      
      <DataImageItem cardDataImage={this.state.userImage} />; {//Remove mapping}
      
      <div className="card-body card-body-style">
        <h2 className="card-title card-title-style">
          {this.state.allData.userData.name}
        </h2>
        <div className="info">
          <p>
            <strong>Email: </strong>
            {this.state.allData.userData.email}
          </p>
          <p>
            <strong>Phone: </strong>
            {this.state.allData.userData.phone}
          </p>
          <p>
            <strong>Company: </strong>
            {this.state.allData.userData.company.name}
          </p>
          <p>
            <strong>Website: </strong>
            {this.state.allData.userData.website}
          </p>
          <p>
            <strong>Address: </strong>
            {this.state.allData.userData.address.street},{" "}
            {this.state.allData.userData.address.suite},
            {this.state.allData.userData.address.city},{" "}
            {this.state.allData.userData.address.zipcode}
          </p>
        </div>
      </div>
    </div>
  </div>
);
}
}

資料項影像

import React, { Component } from "react";
import DataImage from "./DataImage";

 export default class DataImageItem extends Component {
 constructor(props) {
   super(props);
   this.state = {
    cardDataImage: this.props.cardDataImage, //Contains image url
   };
 }

 render() {
   return (
     <div className="img-square-wrapper p-2">
       
         <DataImage imageData={this.state.cardDataImage} />;
        
     </div>
  );
 }
}

資料影像

import React, { Component } from "react";
export default class DataImage extends Component {
 constructor(props) {
   super(props);

    this.state = {
     imageData: this.props.imageData,
   };
 }
  render() {
   return <img className="profile-img" src= 
    {this.state.imageData} alt="" />;
  }
 }

您還可以查看官方檔案以獲取有關模板文字的更多資訊。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/347738.html

標籤：javascript 反应

上一篇：在Javascri[t中驗證表單資料時的異步函式

下一篇：NSFileManagercreateDirectoryAtPath方法回傳true但沒有創建目錄