Question

下面是我最大的噩梦代码。我不断收到apiData.map不是函数的错误。任何可以帮助的机构。我还需要知道为什么ApiGetData不使用react。

我确实获得了api数据，但似乎我将其错误地导入到ClassFilmData中，并且出现了.map错误。所有帮助将不胜感激。

试图以各种方式导出电影ApiGetData。从其他平台获得的帮助已实现，但未能解决问题。搜索-其他swapi项目，导入数据反应，沙箱，仓库和其他平台

// import React from 'react';
import { ApiToGet } from "./ApiToGet";

const ApiGetData = async function() {
  try {
    const films = await Promise.all(
      ApiToGet.map(url => fetch(url).then(resp => resp.json()))
    );
    console.log("film title - ", films.results);
    return films;
  } catch (err) {
    console.log("oooooooops", err);
  }
};
ApiGetData();

export default ApiGetData;

import React from "react";
import FilmsInfo from "./FilmsInfo";

const FilmsLoop = ({ apiData }) => {
  return (
    <div className="tc f1 unknown">
      {apiData.map((answers, i) => {
        return (
          <FilmsInfo
            key={i}
            // title={ apiData.films.results[i].title }
          />
        );
      })}
    </div>
  );
};

export default FilmsLoop;

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

class ClassFilmData extends Component {
  render() {
    return (
      <div>
        <p className="tc f1">Wim - classfilmdata</p>
        <FilmsLoop apiData={ApiGetData} />
      </div>
    );
  }
}

export default ClassFilmData;

import React from "react";

const FilmsInfo = () => {
  return (
    <div className="tc bg-light-blue dib br3 pa3 ma3 grow bw2 shadow-5">
      <p>Planet</p>
      <p>FilmsInfo.js</p>
    </div>
  );
};

export default FilmsInfo;

Answer 1

这是因为apiData确实是ApiGetData，这是一个应许。

如果您尝试使用通过解决此承诺返回的数组，则必须执行以下操作：

class ClassFilmData extends Component {
  componentDidMount() {
    const apiData = await ApiGetData();
    this.setState({ apiData });

  }
  render() {
    return(
      <div>
        <p className="tc f1">Wim - classfilmdata</p>
        {this.state.apiData && <FilmsLoop apiData={ this.state.apiData }/> }
      </div>
    );
  }
}

从api导入数据到新模块-.map（）不是函数

1 个答案: