时间戳

首页 > 解决方案 > 尝试在 React 中映射传递的对象属性数组

javascript - 尝试在 React 中映射传递的对象属性数组

问题描述

不久前开始学习 React 和 JS。我有一个父类“App”，它从 data.js 获取一组对象“数据”。App.js 将该“数据”属性发送到“BookList”类。我正在尝试映射 BookList 类中的所述属性并将元素保存在“mappedBooks”中，但不断收到此错误：TypeError: this.props.books.map is not a function

数据.JS：

    const data = [
    {
        id: 1,
        title: `The Pragmatic Programmer`, 
        author: `David Thomas, Andrew Hunt`,
        img: `https://images-na.ssl-images-amazon.com/images/I/51cUVaBWZzL._SX380_BO1,204,203,200_.jpg`
    },
    {
        id: 2,
        title: `HTML and CSS: Design and Build Websites`, 
        author: `Jon Duckett`,
        img: `https://images-na.ssl-images-amazon.com/images/I/31aX81I6vnL._SX351_BO1,204,203,200_.jpg`
    },
    {
        id: 3,
        title: `Coding All-in-one For Dummies`, 
        author: `Nikhil Abraham`,
        img: `https://images-na.ssl-images-amazon.com/images/I/51RXaV0MGzL._SX397_BO1,204,203,200_.jpg`
    },
    {
        id: 4,
        title: `Learning React`, 
        author: `Alex Banks, Eve Porcello`,
        img: `https://images-na.ssl-images-amazon.com/images/I/51FHuacxYjL._SX379_BO1,204,203,200_.jpg`
    },
    {
        id: 5,
        title: `Learning Web Design`, 
        author: `Jennifer Robbins`,
        img: `https://images-na.ssl-images-amazon.com/images/I/51iVcZUGuoL._SX408_BO1,204,203,200_.jpg`
    },
    {
        id: 6,
        title: `JavaScript and JQuery: Interactive Front-End Web Development`, 
        author: `Jon Duckett`,
        img: `https://images-na.ssl-images-amazon.com/images/I/41y31M-zcgL._SX400_BO1,204,203,200_.jpg`
    },
    {
        id: 7,
        title: `Head First JavaScript Programming`, 
        author: `Eric Freeman, Elisabeth Robson`,
        img: `https://images-na.ssl-images-amazon.com/images/I/51qQTSKL2nL._SX430_BO1,204,203,200_.jpg`
    },
    {
        id: 8,
        title: `Learning Redux`, 
        author: `Daniel Bugl`,
        img: `https://images-na.ssl-images-amazon.com/images/I/41gxBZ8GNpL._SX403_BO1,204,203,200_.jpg`
    },
    {
        id: 9,
        title: `Node.js 8 the Right Way`, 
        author: `Jim Wilson`,
        img: `https://images-na.ssl-images-amazon.com/images/I/51t44mzlCaL._SX415_BO1,204,203,200_.jpg`
    },
    {
        id: 10,
        title: `PostgreSQL: Up and Running`, 
        author: `Regina Obe`,
        img: `https://images-na.ssl-images-amazon.com/images/I/51FSjiYDfpL._SX379_BO1,204,203,200_.jpg`
    },
    {
        id: 11,
        title: `Fundamentals of Web Development`,
        author: `Randy Connolly, Ricardo Hoar`, 
        img: `https://images-na.ssl-images-amazon.com/images/I/51xEzGTH6lL._SX402_BO1,204,203,200_.jpg`
    },
    {
        id: 12,
        title: `Web Design Playground`,
        author: `Paul McFedries`, 
        img: `https://images-na.ssl-images-amazon.com/images/I/41-6F+RDbIL._SX258_BO1,204,203,200_.jpg`
  }
]
export default data;

APP.JS

import React, {Component} from 'react'
import './App.css';
import BookList from './Components/BookList';
import Header from './Components/Header'
import Shelf from './Components/Shelf';
import data from './data'

class App extends Component {

  constructor(){
    super()

    this.state ={
      books : {data}
    }
    
  }
  
  render(){
    return (
    <div className="App">
      <Header/>
      <BookList books={this.state.books}/>
      <Shelf/>      
      
    </div>
  );
  }
}
  
export default App;

和BOOKLIST.JS：


import React, {Component} from 'react'

class BookList extends Component{

    render(){
      
        let mappedBooks = this.props.books.map(function(element){
         return {element}
         })
    
        return(
            <div className = 'BookList'>
                <h1>list</h1>
            </div>
        )
        
    }

}
export default BookList

标签： javascriptreactjs

解决方案

在 Data.js 你有

export default data;

并且data是一个数组。因此，当您在其中导入数据时，App.js它是一个数组。

尝试运行此代码片段以更好地了解此处发生的情况：

let data = [1,2,3,4]
console.log('when data is an array')
console.log('{data} is', {data})

data = {
  'data': [1,2,3,4]
}
console.log('when data is an object with a property called data pointing to an array')
console.log('{data} is', {data})

console.log('but if you call a function and pass in data (as an object with data as a named property pointing to an array), you can use the curly braces to pull the array out of the object using destructuring')

function destructureData({data}) {
  console.log(data)
}

destructureData(data)

所以，当你这样做时：

this.state = {
  books: { data }
}

它实际上是一个对象属性的简写（在 ES6 中）被解释为：

this.state = {
  books: { data: data }
}

如果您确实想this.state.books成为从中导入的数组，data.js则直接设置它：

this.state = {
  books: data 
}

或者，使用该对象属性的简写，以及您将数据作为默认导出这一事实，您可以将导入更改为：

import books from './data'

然后这样做：

this.state = {
  books 
}

如果您想了解更多关于解构语法的信息——使用花括号从对象或数组中提取数据——<a href="https://developer.mozilla.org/en-US/docs/ Web/JavaScript/Reference/Operators/Destructuring_assignment" rel="nofollow noreferrer">这篇 MDN 上的文章值得一读。

推荐阅读