Question

我想映射over对象而不是Array，我当前的代码与Array映射一起工作很好，但是如果我使用带redux的状态道具来映射对象，则会得到不确定的数据。

我的JSON格式：

{
"exclusive_collection": {
        "id": "0",
        "image_url": "media/mobilebanner/default/ExclusiveCollection-en_new.jpg"
    },
    "exclusive_brands": [
        {
            "id": "1268",
            "is_featured": "0",
            "name": "Spongelle",
            "image_url": "media/catalog/category/Spongelle.jpg"
        },
        {
            "id": "756",
            "is_featured": "0",
            "name": "Black Up",
            "image_url": "media/catalog/category/Black-Up.jpg"
        },
    ],}

减速器功能：

export function items(state = [], action) {

    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return action.items;

        default:
            return state;
    }
}

子组件：

import React, { Component } from 'react';
import Slider from "react-slick";

class ShopbyCategory extends Component {
  render() {
    let shopbycategoryArray = [];
    let shop_by_category = this.props.items.shop_by_category

    for (let key in shop_by_category) {
        shopbycategoryArray.push(shop_by_category[key]);
        return (

        <section className="celebrityslider">
        <div className="row">
        <div className="widget-title"><h3>Shop By Category</h3></div>
        </div>  
        <div className="row">
        <div className="col-md-12 no-padding">  
        <Slider {...slidersettings}>
        {this.props.items.shop_by_category.map((item) => (
                <div key={item.id} className="slider-item">
                    <a href="#"><img src={item.image_url} className="img-responsive"/></a>
                </div>
            ))}  
        </Slider>
        </div>
        </div>        
        </section>
        );
    }

    if (this.props.hasErrored) {
        return <p>Sorry! There was an error loading the items</p>;
    }

    if (this.props.isLoading) {
        return <p>Loading…</p>;
    }
    return (
        null
    );

  }

}

我可以在组件中使用上面的代码来获取Exclusive_brands数组的数据。

但是我不确定如何获取 exclusive_collection 的数据。如果执行以下操作，我总是会变得不确定：

let exclusive_collection = this.props.items.exclusive_collection
console.log (exclusive_collection);

如果有人可以帮助我使用redux或其他方式来映射它，我将不胜感激。谢谢

如何使用React JS + Redux使用JSON API映射对象而不是数组

0 个答案: