React保存了后台数据，如何把它渲染出来

#1 
class Order extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listOptions: [{name: "全部", type: 0}, {name: "已完成", type: 5}, {name: "待付款", type: 1}, {name: "已取消", type: 3}],
            allData: {},
            activeIndex: 0
        }
    }
    render() {
        //生成tabTitle结构
        let { activeIndex } = this.state;
        var listTabTitle = this.state.listOptions.map(function(item, index) {
            return <li key={index} data-index={index} className={"swiper-slide " + (index == activeIndex ? "active-nav" : "")} style={{margin:'0 0.5rem'}}>{item.name}</li>
        });
        //生成tabContent结构

        return (
            <Panel>
                <Panel.header>
                    <Header headerLeft="back" headerLeftClick={this.goBack.bind(this)} navigationBack={this.props.navigationBack}   headerTitle={Utils.getQueryString("title") || "行业报告"}></Header>
                </Panel.header>
                <Panel.body>
                    <ListTab currentName="rankingList" listTabTitle={listTabTitle} sliderChanged={this.sliderChanged.bind(this)}>
                        { listTabContent }
                    </ListTab>
                </Panel.body>
            </Panel>
        )
    }


    goBack() {
        if(!!this.props.hideThis) {
            this.props.hideThis();
        }else {
            return true;
        }
    }


    //存储数据
    requestData(orderStatus=1) {
      let _this = this;
      let { requestPost } = this.props;
      let { allData, listOptions, activeIndex } = this.state;
      requestPost(
        "/auth/user/order/list",
        {
            page: 1,
            orderStatus:orderStatus
        },
        function(res) {
            let data = res.data;
            console.log(allData);
            let type = listOptions[activeIndex].type.toString();
            allData[type] = data;
            _this.setState({
                allData: allData
          });
        }
      )
    }

把数据渲染到这上面，根据里面的type，打印出来的数据为

现在就是不知道怎么根据里面的orderState的序号把数据渲染出来，求助！！ react新手， 若能解决，有偿！！

#2

不太明白你的问题在哪里。

你的数据结构也不太合理。

像这种tab，一般一次返回所有请求，因为订单数量不大。

{
  "tab1": [{}, {}],
  "tab2": [{}, {}],
  "tab3": [{}, {}],
  "tab4": [{}, {}]
}

渲染的时候，根据key去匹配当前该渲染的数据。

render() {
 let currentTab = "tab2"//假设是tab2
 const { allData } = this.state //allData是一个对象
  return (
    <div> 
      {
        allData[currentTab].length > 0 &&  allData[currentTab].map((data, key) => {

        }
          <Order key={key}
                      //把你需要的参数一个个传递进来
          />
        ) 
      }
    </div>
  )
}
#3

是这样的一开始我是写死的，样式什么的我都写好了，如下：




一共四个，type 分别是 0 5 1 3
然后现在我要把我获取的后台数据来代替我写死的数据，就不会了

#4

最简单的写法就是只需要一个组件，不需要写n个content =

，但是，既然你都用n个content来区分每个状态下的订单，那么你只能自求多福了。。
#5

你这种只要一次把数据从后台请求回来就可以了啊，再传给各个tab里去，切换的时候渲染出来就好。
跟之前jq一样，ajax也行，https://github.com/meibin08 ,也有整理过一些demo希对你有帮助，:slight_smile:
https://github.com/meibin08

#6

可用在 hyy1115 代码的基础上在Order组件里面再进行分类渲染

function Order(props) {
    const {type} = props
    const orderMap = {
        type1: data => <OrderType1 {...data} />,
        type2: data => <OrderType2 {...data} />,
        type3: data => <OrderType3 {...data} />,
    }
    return orderMap[type](props)
}

再补充下，hyy1115的意思是直接用一个Order组件来搞定，不再拆分，因为每条订单的样式和数据是类似的，在Order组件内部去做判断然后渲染不同内容就ok了，我是这么理解的。

#7

各位，我做出来了。主要是不理解react里面map的原理所以不知从哪里入手。如下：
确实只需要一个类似组件的可单个重复利用，使用map方法，根据里面的每个独一无二的type自动分类，然后订单里的其他变量，手动清空然后赋值，就ok啦！