Question

我在反应原生中相当新。我尝试使用webservice的响应动态填充Accordion组件。我到达正确渲染部分但不是他们的内容，让我们看看代码。

renderHeader(section){
    return (
        <View style={{height: 60}}>
            <Body>
            <DefaultText>T {section} :        
              {(this.state.reservations).length} créneaux disponible</DefaultText>
            </Body>
        </View>
    )
}

renderContent(){
    return (
        <View 
           style={{justifyContent: 'center',
           alignItems: 'center', flexDirection: 'row'}}
        >
                {
                    this.state.reservations.map(item => {
                        return (
                            <DefaultText>
                                {item.start}
                            </DefaultText>
                        )
                })}
        </View>
    )
}

<Accordion
    sections={this.state.idPlayGround}
    renderHeader={this.renderHeader}
    renderContent={this.renderContent}
/>

此请求对应于我需要在我的部分中输入的值：

fetch(WEB_SERV + "searchTerrains", {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'surfaceID=' + this.state.surface + '&p_heureDebut=' + this.state.hour + '&p_date=' + (Platform.OS === 'ios' ? moment(this.state.date, "DD/MM/YYYY").format("MM/DD/YYYY") : this.state.date) + '&p_double=' + this.state.matchType
    })
        .then(response => response.json())
        .then((responseJson) => {
            let idPlayGround = [];
            for(let i=0; i<responseJson.length; i++){
                idPlayGround.push(responseJson[i].TER_DESIGNATION);
            }
            this.setState({
                idPlayGround: idPlayGround,
                show: false,
            });
        }).catch(console.log)

这个对应于我的内容的值：

fetch(WEB_SERV + "searchCreneaux", {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'surfaceID=' + this.state.surface + '&p_heureDebut=' + this.state.hour + '&p_date=' + (Platform.OS === 'ios' ? moment(this.state.date, "DD/MM/YYYY").format("MM/DD/YYYY") : this.state.date) + '&p_double=' + this.state.matchType
    })
        .then(response => response.json())
        .then((responseJson) => {
            let hTerrains = [];
            responseJson.map((item) => {
                hTerrains.push({
                    't_start': item.HEURE_DEBUT,
                    't_designation': item.TER_DESIGNATION,
                    't_id': item.TER_ID
                });
            });
            this.setState({
                reservations: hTerrains
            })
        }).catch(console.log)

我只需 t_start ，也许 t_designation ，其他值在这种情况下无用。

我不知道在哪里需要分割我的值，在渲染中获取或者可能是带有地图的方法。我很失落，我真的很感激你的帮助。

Answer 1

最后解决方案很简单。我只需要将 t_designation 与部分进行比较，并在等于时渲染 t_start ，请参阅以下代码：

renderContent(section){
    return (
        <View style={{flexWrap: 'wrap', alignItems: 'flex-start', justifyContent:'center', flexDirection: 'row'}}>
                {
                    this.state.reservations.map((item, index) => {
                        return (
                            <DefaultText key={index}
                                style={{backgroundColor: 'blue', textAlign: 'center', }}>
                                {
                                    item.t_designation === section ?
                                        item.t_start
                                        :
                                        ""
                                }
                            </DefaultText>
                        )
                })}
        </View>
    )
}

感谢您的帮助

使用Web服务响应动态填充Accordion组件

1 个答案: