用web服务响应动态填充手风琴组件
用web服务响应动态填充手风琴组件
提问于 2018-02-16 12:54:23
我在反应本土化方面还很新。我尝试用来自webservice的响应动态地填充手风琴组件。我到达正确的呈现部分，但不是他们的内容，让我们看看代码。
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_designation，，，t_start，，也许其他的值在这种情况下是没用的。
我不知道我需要在哪里拆分我的值，在获取渲染中，或者使用map的方法。我很迷茫，非常感谢你的帮助。
回答 1
Stack Overflow用户
发布于 2018-02-16 14:52:34
最后，解决办法很简单。我只需要比较t_designation by 节，并在它们相等时呈现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>
)
}谢谢你的帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48827270
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号