如何在React Native中正确呈现手风琴中获取的api结果?

时间:2018-12-10 08:12:20

标签: javascript reactjs react-native jsx native-base

您好,在我的项目中,我正在使用native-base的手风琴。我想做的是显示手风琴中从服务器获取的结果。但不幸的是,我无法实现这一目标,因为在手风琴的内容和标题的渲染中,我正在进行条件渲染。所以手风琴我什么也没收到。以下是我的代码以及服务器的json响应。请帮助我找出错误。我真的不知道这是什么错误。请指导。

json

 [{
    data: {
      course: {
        name: "I. India Economy CourseWare",
        categories: [{
          id: 299,
          name: "Indian Economy Courseware",
        }],
        instructor: {
          id: "1",
          name: "Main Admin",
          sub: ""
        },
        menu_order: 0
      },
      description: "",
      curriculum: [{
          key: 0,
          id: 0,
          type: "section",
          title: "A1. India's Economic Development",

        },
        {
          key: 1,
          id: "2821",
          type: "unit",
          title: "1. India as a Developing Economy",
          duration: 0,
          meta: []
        },
        {
          key: 2,
          id: "2864",
          type: "unit",
          title: "2. Understanding India’s economic transition",
          duration: 0,
          meta: []
        }
      ]
    ]
  }

我要显示的是手风琴中的内容,我想显示curriculum titletype=section作为手风琴headerContent,并在手风琴内容中显示type=unit的相应标题。以下是我的代码。我得到的是这个[![在此处输入图片描述] [1]] [1] https://i.stack.imgur.com/4wqgZ.png

代码*

componentWillMount() {

  fetch('xxxxxxxx' + this.props.navigation.state.params.id)
    .then((response) => response.json())
    .then((responseData) =>
      this.setState({
        details: responseData
      })
    );
}


render() {
    return ( <
        Container style = {
          styles.container
        } >
        <
        Header
        .. <
        /Header>

        <
        Card style = {
          {
            margin: 10,
            backgroundColor: '#f77a6c'
          }
        } >
        ...
        ...
        .....
        ......
        <
        /Card>

        <
        View style = {
          {
            padding: 10
          }
        } >

        {
          this.state.details.map(detail =>
            <
            ScrollView >

            {
              detail.data.curriculum.map(curr =>


                <
                Accordion dataArray = {
                  curr
                }
                animation = {
                  true
                }
                expanded = {
                  true
                }
                renderHeader = {
                  curr.type === "section" ? ( <
                    Card >
                    <
                    CardItem style = {
                      {
                        backgroundColor: "green"
                      }
                    } >
                    <
                    Body >
                    <
                    Text >
                    {curr.title}<
                    /Text> <
                    /Body> <
                    /CardItem> <
                    /Card>
                  ) : ( < Text > Header < /Text>)}
                    renderContent = {
                      curr.type === "unit" ? (

                        <
                        Card >
                        <
                        CardItem style = {
                          {
                            backgroundColor: "lightgreen"
                          }
                        } >
                        <
                        Body >
                        <
                        Text >
                        {curr.title}<
                        /Text> <
                        /Body> <
                        /CardItem> <
                        /Card>
                      ) : ( < Text > Content < /Text>)} /
                        >

                      )
                    } <
                    /ScrollView>


                  )
                }

                <
                /View> <
                /Container>
              );
            }
          }

0 个答案:

没有答案