Javascript 显示来自API搜索调用的数据（来自TMDB）

我从中查找搜索函数，并尝试应用到我的搜索url，这是一个对TMDB数据库的api调用，带有一个深分支响应。 搜索结果如下所示： { }

{
“页码”：1，
“总结果”：141，
“总页数”：8页，
“结果”：[
{
“计票”：14162，
“人气”：40.812，
“id”：272，
“视频”：假，
“媒体类型”：“电影”，
“平均投票数”：7.7，
“标题”：“蝙蝠侠开始”，
“发布日期”：“2005-06-10”，
“原始语言”：“en”，
“原始标题”：“蝙蝠侠开始”，
“类型识别码”：[
28,
80,
18
],
“背景路径”：“/lh5lbisD4oDbEKgUxoRaZU8HVrk.jpg”，
“成人”：假，
《概述》：“在悲剧的驱使下，亿万富翁布鲁斯·韦恩（Bruce Wayne）毕生致力于揭露和击败困扰其家乡高谭市的腐败。由于无法在体制内工作，他反而创造了一个新身份，一个对犯罪黑社会的恐惧象征——蝙蝠侠。”，
“海报路径”：“/aGdng8Ic4ONpcepU3bVXPSLmNd3.jpg”
},
{
“原名”：“蝙蝠侠”，
“类型识别码”：[
35,
10759,
10765
],
“媒体类型”：“电视”，
“姓名”：“蝙蝠侠”，
“人气”：24.871，
“来源国”：[
“美国”
],
“计票”：153，
“首次飞行日期”：“1966-01-12”，
“背景路径”：“/gpJZiTvklr5JN0mzpQwl99peQD7.jpg”，
“原始语言”：“en”，
“id”：2287，
“平均投票数”：7.1，
“概览”："富有的企业家布鲁斯·韦恩（Bruce Wayne）和他的病房迪克·格雷森（Dick Grayson）过着双重生活：他们实际上是打击犯罪的二重唱蝙蝠侠（Batman）和罗宾（Robin）。韦恩豪宅中的一根秘密蝙蝠杆通向蝙蝠洞，警察局长戈登经常打电话给蝙蝠洞，通报威胁高谭市的最新紧急情况。蝙蝠侠在蝙蝠车（Batmobile）中追逐犯罪现场罗宾必须（在他们可靠的蝙蝠实用腰带的帮助下）挫败各种主要罪犯的努力，包括谜语者、小丑、猫女和企鹅。”，
“海报路径”：“/1ZEJuuDh0Zpi5ELM3Zev0GBhQ3R.jpg”
},
{
“海报路径”：“/xVaHD9sgzwE129UcdhMtwyhndYj.jpg”，
“人气”：21.393，
“计票”：4657，
“视频”：假，
“媒体类型”：“电影”，
“id”：268，
“成人”：假，
“背景路径”：“/rbn6gpkudzkqiezegz0dzb6v.jpg”，
“原始语言”：“en”，
“原始标题”：“蝙蝠侠”，
“类型识别码”：[
28,
14
],
“头衔”：“蝙蝠侠”，
“平均投票数”：7.2，
《概述》：“高谭市的黑暗骑士开始了他的犯罪之战，他的第一个主要敌人是小丑般的杀人小丑，他控制了高谭市的黑社会。”，
“发布日期”：“1989-06-23”
},
{
“原名”：“蝙蝠侠”，
“类型识别码”：[
16,
9648,
10759,
10765
],
“媒体类型”：“电视”，
“名字”：“蝙蝠侠”，
“人气”：27.069，
“来源国”：[
“美国”
],
“计票”：74，
“首次发布日期”：“2004-09-11”，
“U路径”：空，
“原始语言”：“en”，
“id”：2022年，
“平均投票数”：7.5，
“概述”：《蝙蝠侠》是华纳兄弟公司根据DC漫画超级英雄《蝙蝠侠》制作的一部美国动画电视连续剧。该剧于2004年9月11日至2008年3月22日在星期六上午电视台儿童WB播出。\n\n尽管该剧借用了以前蝙蝠侠故事情节的许多元素，但没有遵循漫画书、电影系列，也不是蝙蝠侠：动画系列及其衍生产品。角色设计由成龙历险艺术家杰夫·松田（Jeff Matsuda）提供；他还导演了结局。该系列获得了六项日间艾美奖。”，
“海报路径”：“/QTYUK6HYHXEUMIVI6KJZOKM2W4.jpg”
},
{
“海报路径”：“/bsg0mrxUKyJoL4oSGP5mlhEsqp.jpg”，
“人气”：22.591，
“计票”：3201，
“视频”：假，
“媒体类型”：“电影”，
“id”：415，
“成人”：假，
“背景路径”：“/tgPFZxhDuxWd4VXYaz8eAUznGTF.jpg”，
“原始语言”：“en”，
“原始标题”：“蝙蝠侠与罗宾”，
“类型识别码”：[
28,
35,
14,
878
],
“标题”：“蝙蝠侠与罗宾”，
“平均投票数”：4.3，
《概述》：“蝙蝠侠与打击犯罪的搭档罗宾和新招募的蝙蝠侠一起，与冷酷天才弗雷兹先生和杀人园艺家毒藤的双重威胁作斗争。弗雷兹计划将高谭城置于冰上，而艾藤则试图在这对活力四射的二人之间挑拨离间。”，
“发布日期”：“1997-06-20”
}，

import './stylesheetSearch.css'
import axios from 'axios';
import Loader from './loader.gif'
import PageNavigation from "./PageNavigation";
import Table from "@material-ui/core/Table";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
import TableBody from "@material-ui/core/TableBody";
import DeleteIcon from "@material-ui/icons/Delete";
class Search extends Component{
    constructor(props) {
        super(props);
        this.state={
            query:'',
            results:{},
            loading: false,
            message:'',
            totalResults: 0,
            totalPages: 0,
            currentPageNo: 0,


        }
        this.cancel = '';
    }


    //////
    handleOnInputChange = ( event ) => {
        const query = event.target.value;
        if ( ! query ) {
            this.setState( { query, results: {}, message: '', totalPages: 0, totalResults: 0 } );
        } else {
            this.setState( { query, loading: true, message: '' }, () => {
                this.fetchSearchResults( 1, query );
            } );
        }
    };

    fetchSearchResults = ( updatedPageNo = '', query ) => {
        const pageNumber = updatedPageNo ? `&page=${updatedPageNo}` : '';
        const searchUrl = `https://api.themoviedb.org/3/search/multi?api_key=(input api key)&query=${query}${pageNumber}`;
////we wanr to search only when we finished typing
        //we use a cancel token to cancel the request before we finish typing
        if( this.cancel ) {
            this.cancel.cancel();
        }

        this.cancel = axios.CancelToken.source();

        axios.get( searchUrl, {
            cancelToken: this.cancel.token
        } )
            .then( res => {
                const total = res.data.total;
                console.warn(res.data);
                const totalPagesCount = this.getPageCount( total, 20 );
                const resultNotFoundMsg = ! res.data.hits.length
                    ? 'There are no more search results. Please try a new search'
                    : '';
                this.setState( {
                    results: res.data.hits,
                    message: resultNotFoundMsg,
                    totalResults: total,
                    totalPages: totalPagesCount,
                    currentPageNo: updatedPageNo,
                    loading: false
                } )
            } )
            .catch( error => {
                if ( axios.isCancel(error) || error ) {
                    this.setState({
                        loading: false,
                        message: 'Failed to fetch the data. Please check network'
                    })
                }
            } )
    };
///methid to loop through array of results

    renderSearchResults = () => {
        const { results } = this.state;

                    if ( Object.keys( results ).length && results.length ) {
                        return (
                            <div className="results-container">
                                {this.state.results.map(result => {
                                    return (
                                        <h3 key={result.id}  className="result-item">
                                            <h6 className="image-username">{result.title}</h6>

                                        </h3>
                                    )
                                })}


                            </div>
                        )
                    }
    }

    getPageCount = ( total, denominator ) => {
        const divisible = 0 === total % denominator;
        const valueToBeAdded = divisible ? 0 : 1;
        return Math.floor( total/denominator ) + valueToBeAdded;
    };
    handlePageClick = ( type ) => {
       // event.preventDefault();
        const updatePageNo = 'prev' === type
            ? this.state.currentPageNo - 1
            : this.state.currentPageNo + 1;

        if( ! this.state.loading  ) {
            this.setState( { loading: true, message: '' }, () => {
                this.fetchSearchResults( updatePageNo, this.state.query );
            } );
        }
    };

    render()
    {
        const { query, loading, message, currentPageNo, totalPages } = this.state;

        const showPrevLink = 1 < currentPageNo;
        const showNextLink = totalPages > currentPageNo;
        return(

          <div className="container">
              {/*Heading*/}
              <h2 className="heading">Live Search for movies</h2>
              {/*Search Input*/}
              <label className="search-labe" htmlFor="search-input">
                  <input type="text"  value={query} id="search-input" placeholder="Search...." name="query"
                      onChange ={this.handleOnInputChange}
                  />
                  <i className="fas fa-search" aria-hidden="true"></i>
              </label>


              {/*   Error Message*/}
              {message && <p className="message">{ message }</p>}

              {/*   Loader*/}
              <img src={ Loader } className={`search-loading ${ loading ? 'show' : 'hide' }`} alt="loader"/>
              {/*Navigation*/}
              <PageNavigation
                  loading={loading}
                  showPrevLink={showPrevLink}
                  showNextLink={showNextLink}
                  handlePrevClick={ () => this.handlePageClick('prev')}
                  handleNextClick={ () => this.handlePageClick('next' )}
              />

              {/*   Result*/}
              { this.renderSearchResults() }


              {/*Navigation*/}
              <PageNavigation
                  loading={loading}
                  showPrevLink={showPrevLink}
                  showNextLink={showNextLink}
                  handlePrevClick={ () => this.handlePageClick('prev')}
                  handleNextClick={ () => this.handlePageClick('next' )}
              />

          </div>
        );
    }


}
export  default Search;

import./stylesheetSearch.css'
从“axios”导入axios；
从“./Loader.gif”导入加载程序
从“/PageNavigation”导入页面导航；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableBody”导入表体；
从“@material ui/icons/Delete”导入DeleteIcon；
类搜索扩展组件{
建造师（道具）{
超级（道具）；
这个州={
查询：“”，
结果：{}，
加载：false，
消息：“”，
结果：0，
总页数：0，
当前页面编号：0，
}
这个。取消=“”；
}
//////
handleOnInputChange=（事件）=>{
const query=event.target.value；
如果（！查询）{
this.setState（{query，results:{}，消息：“”，totalPages:0，totalResults:0}）；
}否则{
this.setState（{query，load:true，消息：'}，（）=>{
this.fetchSearchResults（1，查询）；
} );
}
};
fetchSearchResults=（updatedPageNo=“”，查询）=>{
欺骗