Javascript 将多个url源添加到一个列表显示[ReactJs]

所以我目前正在为一个显示卡片列表的页面设计一个管理控制面板。这些卡片包含从本地API传递的详细信息，该API承载一系列数据，如“id”、“标题”、“URL”和“ThumbnailUrl”，这些数据从“localhost:0000/视频”中获取

所以我有一个模块，一个创建名为HelpCard.tsx的卡的模块，代码如下：

import React, { Component } from "react";
import "../help/HelpCardTwo.css";
import "../help/HelpList";
import Popup from "reactjs-popup";
import spinner from "../help/spinner.gif";
import placeholder from "../help/placeholder.jpeg";

interface Props {
  id: string;
  url: string;
  title: string;
  thumbnail: string;
  deleteProduct: (id: any) => void;
  editProduct: (id: any, title: string, url: string, thumbnail: string) => void;
}

interface State {
  title: string;
  thumbnail: string;
  id: string;
  url: string;
  imageLoading?: boolean;
  tooManyRequests?: boolean;
}

export default class HelpCard extends Component<Props, State> {
  state = {
    url: "",
    id: "",
    title: "",
    imageLoading: true,
    tooManyRequests: false,
    thumbnail: ""
  };

  componentDidMount() {
    const { url, title, thumbnail } = this.props;
    const id = url.split("/")[url.split("/").length - 2];

    this.setState({
      url,
      id,
      title,
      thumbnail,
      imageLoading: true,
      tooManyRequests: false
    });
  }

  render() {
    const isThumbnail = this.state.thumbnail;
    const adminhelpcard = this.state;
    return (
      <React.Fragment>
        <div className="cards">
          <article className="card card--2">
            <div className="card__info-hover"></div>
            <div className="card__img">
              {this.state.imageLoading ? <img src={placeholder} style={{ width: "100%", height: "100%" }}></img> : null}
              <img
                className="Sprite"
                onLoad={() => this.setState({ imageLoading: false })}
                onError={() => this.setState({ tooManyRequests: false })}
                src={this.state.thumbnail}
              />
            </div>

            <div className="card__info">
              <span className="card__category">{this.state.title}</span>
              <div className="cardButtons">
                <Popup trigger={<button className="btn blue-outline">Edit</button>} modal position="left top">
                  <form
                    onSubmit={(e) => e.preventDefault()}
                    id="videoCardEdit"
                    style={{ width: "auto", height: "auto" }}>
                    <div>
                      <div>
                        <label>Title:</label>
                        <input
                          className="input"
                          style={{ width: "100%" }}
                          name="videoCardTitle"
                          onChange={(e) => {
                            this.setState({ title: e.target.value });
                          }}
                          value={this.state.title}></input>
                      </div>
                      <div>
                        <label>URL:</label>
                        <input
                          className="input"
                          style={{ width: "100%" }}
                          name="videoCardURL"
                          onChange={(e) => {
                            this.setState({ url: e.target.value });
                          }}
                          value={this.state.url}></input>
                      </div>
                      <div>
                        <label>Thumbnail URL:</label>
                        <input
                          className="input"
                          style={{ width: "100%" }}
                          name="videoCardThumbnail"
                          onChange={(e) => {
                            this.setState({ thumbnail: e.target.value });
                          }}
                          value={this.state.thumbnail}></input>
                      </div>
                      <br></br>
                    </div>
                    <button
                      className="btn blue-outline"
                      style={{
                        float: "left"
                      }}
                      onClick={() =>
                        this.props.editProduct(this.props.id, this.state.title, this.state.url, this.state.thumbnail)
                      }
                      id="btn blue-outline">
                      confirm
                    </button>
                  </form>
                </Popup>
                <button onClick={() => this.props.deleteProduct(this.props.id)} className="btn blue-outline">
                  Delete
                </button>
              </div>
            </div>
          </article>
        </div>
      </React.Fragment>
    );
  }
}

import React，{Component}来自“React”；
导入“./help/HelpCardTwo.css”；
导入“./帮助/帮助列表”；
从“reactjs弹出窗口”导入弹出窗口；
从“./help/spinner.gif”导入微调器；
从“./help/placeholder.jpeg”导入占位符；
界面道具{
id：字符串；
url:string；
标题：字符串；
缩略图：字符串；
deleteProduct：（id:any）=>无效；
editProduct:（id:any，title:string，url:string，缩略图：string）=>void；
}
界面状态{
标题：字符串；
缩略图：字符串；
id：字符串；
url:string；
imageLoading？：布尔值；
tooManyRequests？：布尔值；
}
导出默认类帮助卡扩展组件{
状态={
url:“”，
id:“”，
标题：“，
图像加载：对，
tooManyRequests:错误，
缩略图：“
};
componentDidMount（）{
const{url，title，thumbnail}=this.props；
const id=url.split（“/”[url.split（“/”）.length-2]；
这是我的国家({
网址，
身份证件
标题
缩略图，
图像加载：对，
tooManyRequests:错误
});
}
render（）{
const isThumbnail=this.state.thumbnail；
const adminhelpcard=this.state；
返回(
{this.state.imageLoading？：null}
{this.state.title}
e、 preventDefault（）}
id=“videoCardEdit”
样式={{宽度：“自动”，高度：“自动”}>
标题：
{
this.setState（{title:e.target.value}）；
}}
值={this.state.title}>
网址：
{
this.setState（{url:e.target.value}）；
}}
值={this.state.url}>
缩略图URL:
{
this.setState（{缩略图：e.target.value}）；
}}
值={this.state.thumbnail}>



this.props.editProduct（this.props.id、this.state.title、this.state.url、this.state.缩略图）
}
id=“btn蓝色轮廓”>
确认
this.props.deleteProduct（this.props.id）}className=“btn蓝色轮廓”>
删除
);
}
}

然后，我还有HelpList.tsx，其代码如下：

import React, { Component } from "react";
import HelpCard from "./HelpCard";
import "../help/HelpCard.css";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";

interface State {
  url: string;
  title: string;
  adminhelpcard: SingleAdminHelpCard[];
  error: null;
  response: {};
  thumbnail: string;
}

interface SingleAdminHelpCard {
  id: string;
  url: string;
  title: string;
  thumbnail: string;
}

interface Props {}

export default class HelpList extends Component<Props, State> {
  state = {
    title: "",
    thumbnail: "",
    id: "",
    url: "http://localhost:3000/videos/",
    adminhelpcard: [],
    itemsCountPerPage: 1,
    activePage: 1,
    error: null,
    response: {}
  };

  loadAdminHelpCard = () => {
    axios
      .get(this.state.url)
      .then((res) => {
        this.setState((prevState) => {
          const adminhelpcard = prevState.adminhelpcard;
          return {
            adminhelpcard: [...prevState.adminhelpcard, ...res.data],
            url: res.data.next
          };
        });
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  };
  static props: any;

  async componentDidMount() {
    const apiVideoUrl = "http://localhost:3000/videos/";
    const apiManualUrl = "http://localhost:3000/manuals/";

    const res = await axios.get(this.state.url);
    this.setState({ adminhelpcard: res.data });
    fetch(apiVideoUrl)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            adminhelpcard: result
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
    fetch(apiManualUrl)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            adminhelpcard: result
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
  }

  deleteProduct(id: any) {
    const { adminhelpcard } = this.state;

    const apiVideoUrl = `http://localhost:3000/videos/${id}`;
    const apiManualUrl = `http://localhost:3000/manuals/${id}`;

    const options = {
      method: "DELETE"
    };

    fetch(apiVideoUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result,
            adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
    fetch(apiManualUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result,
            adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
          });
        },
        (error) => {
          this.setState({ error });
        }
      );

    console.log(this.state.id);
  }

  editProduct(id: any, title: string, url: string, thumbnail: string) {
    const { adminhelpcard } = this.state;
    const apiVideoUrl = `http://localhost:3000/videos/${id}`;
    const apiManualUrl = `http://localhost:3000/manuals/${id}`;

    const options = {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title,
        url,
        thumbnail
      })
    };

    fetch(apiVideoUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result,
            adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
    fetch(apiManualUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result,
            adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
  }

  render() {
    console.log(this.state.adminhelpcard);
    return (
      <div>
        <React.Fragment>
          {this.state.adminhelpcard ? (
            <div className="row">
              <InfiniteScroll
                pageStart={1}
                loadMore={this.loadAdminHelpCard}
                hasMore={this.state.url ? true : false}
                threshold={0}
                loader={
                  <div className="loader" key={0}>
                    Loading ...
                  </div>
                }>
                {this.state.adminhelpcard.map((adminhelpcard: SingleAdminHelpCard, i) => (
                  <HelpCard
                    id={adminhelpcard.id}
                    key={adminhelpcard.id + i}
                    title={adminhelpcard.title}
                    url={adminhelpcard.url}
                    thumbnail={adminhelpcard.thumbnail}
                    deleteProduct={this.deleteProduct.bind(this)}
                    editProduct={this.editProduct.bind(this)}
                  />
                ))}
              </InfiniteScroll>
            </div>
          ) : (
            <h1>Loading Cards</h1>
          )}
        </React.Fragment>
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“/HelpCard”导入帮助卡；
导入“./help/HelpCard.css”；
从“axios”导入axios；
从“反应无限滚动条”导入无限滚动条；
界面状态{
url:string；
标题：字符串；
adminhelpcard:SingleAdminHelpCard[]；
错误：null；
答复：{}；
缩略图：字符串；
}
接口单管理员帮助卡{
id：字符串；
url:string；
标题：字符串；
缩略图：字符串；
}
接口道具{}
导出默认类帮助列表扩展组件{
状态={
标题：“，
缩略图：“”，
id:“”，
url:“http://localhost:3000/videos/",
管理员帮助卡：[]，
项目浏览每页：1，
活动页面：1，
错误：null，
响应：{}
};
loadAdminHelpCard=（）=>{
axios
.get（this.state.url）
。然后（（res）=>{
this.setState（（prevState）=>{
const adminhelpcard=prevState.adminhelpcard；
返回{
adminhelpcard:[…prevState.adminhelpcard，…res.data]，
url:res.data.next
};
});
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
});
};
静态道具：任何；
异步组件didmount（）{
常量apiVideoUrl=”http://localhost:3000/videos/";
常量apiManualUrl=”http://localhost:3000/manuals/";
const res=await axios.get（this.state.url）；
this.setState（{adminhelpcard:res.data}）；
获取（apiVideoUrl）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
这是我的国家({
管理员帮助卡：结果
});
},
（错误）=>{
this.setState（{error}）；
}
);
获取（URL）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
这是我的国家({
管理员帮助卡：结果
});
},
（错误）=>{
this.setState（{error}）；
}
);
}
deleteProduct（id:any）{
const{adminhelpcard}=this.state；
常量apiVideoUrl=`http://localhost:3000/videos/${id}`；
常量apiManualUrl=`http://localhost:3000/manuals/${id}`；
常量选项={
方法：“删除”
};
获取（apiVideoUrl，选项）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
这是我的国家({
答复：结果，
adminhelpcard:adminhelpcard.filter（（adminhelpcard:SingleAdminHelpCard）=>adminhelpcard.id！==id）
});
},
（错误）=>{
this.setState（{error}）；
}
);
获取（apiManualUrl，选项）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
async function getVideos() {
  const res = await fetch('http://localhost:3000/videos/')
  return await res.json();
}

async function getText() {
  const res = await fetch('http://localhost:3000/texts/')
  return await res.json();
}

Promise.all(getVideos(), getTexts()).then(data = {
 const [ videos, texts ] = data;
 // all data arrived at the same time
})

async componentDidMount() {
    const apiVideoUrl = "http://localhost:3000/videos/";
    const apiManualUrl = "http://localhost:3000/manuals/";

    const getVideos = async() => {
      return await axios.get(apiVideoUrl);
    }

    const getManuals = async() => {
      return await axios.get(apiManualUrl);
    }

    try {
      const [videos,  manuals] = await Promise.all(getVideos(), getManuals());
    // render to state setState({ prop: ? })
    } catch(err) {
      this.setState({ error });
    }
  }