react，get 获取来的数组数据渲染出来就报错

Question

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

当上面代码中的arr 需要渲染出来去报错

    // 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

Answer 1

在item组件中直接使用对象进行渲染，因此报错了。