Question

我目前正在控制面板的页面上加载卡片列表。

我有两种来自API的不同路由，如下所示：

const apiVideoUrl = "http://localhost:3000/videos/";
const apiManualUrl = "http://localhost:3000/manuals/";

它们都返回显示为卡的数据集，并且都包含Id，Title，URL和ThumbnailUrl。我已经成功地单独加载了视频或手册，但似乎无法将它们一起加载。

我的componentDidMount（）如下所示，并且是从以下位置出现错误的地方：

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 (error) {
      this.setState({ error });
    }
  }

错误：

Type '() => Promise<AxiosResponse<any>>' cannot be used as an index type.ts(2538)

来自：

  const [videos, manuals] = await Promise.all[(getVideos, getManuals)];

页面其余部分的代码如下（以防万一）：

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 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 (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>
    );
  }
}

什么原因触发此错误？出于什么原因？

--------------------------编辑-------------------- -------------- 这是console.log的返回

[
  {
    "data": [
      {
        "id": 1,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e.mp4",
        "title": "How to train your dragon video",
        "thumbnail": "https://i.ytimg.com/vi/l3uyjXJl2Fw/hqdefault.jpg"
      },
      {
        "title": "Guide - Web",
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-6928.mp4",
        "thumbnail": "https://i.ytimg.com/vi/Um3BhY0oS2c/hqdefault.jpg",
        "id": 2
      },
      {
        "title": "Reports - Non-Supervisors",
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
        "thumbnail": "",
        "id": 3
      },
      {
        "id": 4,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
        "title": " - Non-Supervisors",
        "thumbnail": ""
      },
      {
        "id": 5,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
        "title": " - Non-Supervisors",
        "thumbnail": ""
      },
      {
        "id": 6,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-198.mp4",
        "title": "Supervisors",
        "thumbnail": ""
      },
      {
        "id": 7,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-deos+1263198.mp4",
        "title": "Supervisors",
        "thumbnail": ""
      }
    ],
    "status": 200,
    "statusText": "OK",
    "headers": {
      "pragma": "no-cache",
      "content-type": "application/json; charset=utf-8",
      "cache-control": "no-cache",
      "expires": "-1"
    },
    "config": {
      "transformRequest": {},
      "transformResponse": {},
      "timeout": 0,
      "xsrfCookieName": "XSRF-TOKEN",
      "xsrfHeaderName": "X-XSRF-TOKEN",
      "maxContentLength": -1,
      "headers": {
        "Accept": "application/json, text/plain, */*"
      },
      "method": "get",
      "url": "http://localhost:3000/videos/"
    },
    "request": {}
  },
  {
    "data": [
      {
        "id": 1,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-ite.pdf",
        "title": "How to train your dragon",
        "thumbnail": ""
      },
      {
        "id": 2,
        "url": "https://onaws.com/ts-ui.e-s.pdf",
        "title": "How to train your dragon test3",
        "thumbnail": ""
      },
      {
        "id": 3,
        "url": "https://sm/ts-ui.e-ide.pdf",
        "title": "Resume full guide",
        "thumbnail": ""
      }
    ],
    "status": 200,
    "statusText": "OK",
    "headers": {
      "pragma": "no-cache",
      "content-type": "application/json; charset=utf-8",
      "cache-control": "no-cache",
      "content-length": "634",
      "expires": "-1"
    },
    "config": {
      "transformRequest": {},
      "transformResponse": {},
      "timeout": 0,
      "xsrfCookieName": "XSRF-TOKEN",
      "xsrfHeaderName": "X-XSRF-TOKEN",
      "maxContentLength": -1,
      "headers": {
        "Accept": "application/json, text/plain, */*"
      },
      "method": "get",
      "url": "http://localhost:3000/manuals/"
    },
    "request": {}
  }
]

Answer 1

在：

const [videos, manuals] = await Promise.all[(getVideos, getManuals)];

在Promise上有一个错误。语法为Promise.All（[]）

您可以使用： const [videos, manuals] = await Promise.All([getVideos(), getManuals()])

如果看不懂，请阅读：https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Answer 2

您似乎只是拼错了括号。

const [videos, manuals] = await Promise.all[(getVideos, getManuals)];

如果要等待getVideos和getManuals解决，则应调用方法 Promise.all （带有括号），并将Iteralbe作为参数传递（带有方括号）：

const [videos, manuals] = await Promise.all([getVideos(), getManuals()]);

如果您想在此处使用promise的值，则可以编写如下代码：

Promise.all([getVideos(), getManuals()]).then(([videos, manuals]) => { /* do stuff */ });

请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

类型'（）=> Promise <AxiosResponse <any >>'不能用作索引类型[ReactJs]

2 个答案: