An error is reported when the array data obtained by react,get is rendered.

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

import "./index.css";
import Item from "./item";
export default class componentName extends Component {
  constructor() {
    super()
    this.state = {
      books: []
    }
  }
  componentDidMount() {

    PORT.callGet("book", 3, "", "", (item) => {
      if (item) {
        this.setState({
          books: item.books
        })
      }
    })
  }
  handleChange(key) {
  }


  render() {
    let parames = this.props.parames;
    const arr = this.state.books;
    console.log(arr)
    return (
      <div className="mainBody">
        <ul>
          {parames.classArg + parames.queryArg}
          {
            [1 2 3].map((item, index) => {//arr
              return <Item key={index} item={item} index={index}></Item>
            })
          }
        </ul>
      </div>
    )
  }
};

< H1 > when the arr in the above code needs to be rendered to report an error < / H1 >

    // import axios from "axios";

import fetchJsonp from "fetch-jsonp";

const PORT = {
    defaultUrl: "https://api.douban.com/v2/",
    fields: "&fields=author,images,summary,title,tags,rating,pubdate,id",
    setSrc(show, count, id, queryArg) {
        let src;
        switch (show) {
            case "book":
                if (queryArg === "") {
                    src = `${this.defaultUrl}book/search?q=&count=${count}${this.fields}`
                } else {
                    src = `${this.defaultUrl}book/search?q=${queryArg}&count=${count}${this.fields}`
                };
                break;
            case "bookDetail":
                src = `${this.defaultUrl}book/${id}`
                break;
            case "movie":
                if (queryArg === "") {
                    src = `${this.defaultUrl}movie/top250?count=${count}`
                } else {
                    src = `${this.defaultUrl}movie/search?q=${queryArg}&count=${count}${this.fields}`
                };
                break;
            case "movieDetail":
                src = `${this.defaultUrl}movie/${id}`
                break;
            case "music":
                if (queryArg === "") {
                    src = `${this.defaultUrl}music/search?q=&count=${count}${this.fields}`
                } else {
                    src = `${this.defaultUrl}music/search?q=${queryArg}&count=${count}${this.fields}`
                };
                break;
            case "musicDetail":
                src = `${this.defaultUrl}music/${id}`
                break;
        };
        return src;
    },
    getData(src, callback) {
        fetchJsonp(src)
            .then(function (response) {
                return response.json()
            }).then(function (json) {
                callback(json)
            }).catch(function (ex) {
                console.log("parsing failed", ex)
            })
    },
    callGet(show, count, id, queryArg, callback) {
        const src = this.setSrc(show, count, id, queryArg, callback)
        this.getData(src, callback);
    }

}


export default PORT