react里怎么对获得的json数据进行处理。

Question

我获取了一个json数据，想把相同的合并在一起，比如说图中的浦东新区有两个店铺，实现区名下面显示所有的店铺。

下面是我的代码：

import React,{Component} from "react"
import "./Cinemalist.css"
import {connect} from "react-redux"
import axios from "axios"

class Cinemalist extends Component{

    componentDidMount(){
        this.props.getCinemalist()
    }

    render(){
        return(
            <div id="cinemalist">
                <ul className="cinemalist-ul">
                    {
                        this.props.mylist.map(item=>
                            <li key={item.id}>
                                <p className="title">{item.district.name}</p> 
                                <div className="cinema">
                                    <h4 className="cinema-name">{item.name}</h4>
                                    <p className="cinema-add">{item.address}</p>
                                </div>
                            </li>
                        )
                    }
                </ul>        
            </div>
        )
    }
}

export default connect(
    (state)=>{
        return {
            mylist:state.cinemalistReducer
        }
    },{
        getCinemalist:()=>{
            return (dispatch)=>{
                axios.get("/v4/api/cinema?__t=1529633184561").then(res=>{
                    console.log(res.data);
                    dispatch({
                        type:"getcinemaData",
                        payload:res.data.data.cinemas
                    })
                })
            }
        }
    }
)(Cinemalist)

数据使用了深复制：

var cinemalist = (prevstate=[],data={})=>{
    let {type,payload} = data;

    switch(type){
        case "getcinemaData":
            return [...prevstate,...payload];
        default :
            return prevstate;
    }
    return prevstate;
}

export default cinemalist

Answer 1

题主能不能给一下数据结构?

Answer 2

现行的数据结构是一个数组，可以对这个数组进行循环，相同的区的item存入一个数组，数据结构由一个一层数组，变成一个两层的数组，然后可以在页面中显示