enter image description here我已经制作了这样的视图，并希望通过调用api获取数据。我有两个用于获取数据的api。第一个是所有商店类别，第二个是取决于类别ID的产品。我调用了第一类api，然后使用每个类别ID提取了垂直平面列表中的所有类别，我在水平式平坦列表中调用了产品api（仅在内部类别列表中）。但是问题是只有最后一个类别ID产品才适用于所有类别。 ..
我不知道我在哪里做错
我对每个函数都有console.log，并且我看到render函数正在调用多次。 另外，当我将类别ID传递给产品功能时，所有类别ID都将出现并附加到产品api，但只有最后一个ID api会创建视图。
从'react'导入React，{组件}; 从'react-native'导入{StyleSheet，Text，View，Image，ImageBackground，TouchableOpacity，ScrollView，FlatList，}； 从“反应导航”中导入{withNavigation};
StoreProfile类扩展了组件{
构造函数（道具）{
super(props);
this.state = {
storeid:'',
isLoading: true,
categorydata: [],
product_id: '',
};
storeid = this.props.navigation.state.params.id ;
}
componentDidMount() {
this.makeCategoryRequest()
}
makeCategoryRequest = () => {
const url = "https://controlf5.in/client-demo/groznysystems/wp-json/dokan/v1/stores/category";
fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"storeid": storeid
})
})
.then((response) => response.json()).then((responseJson) => {
this.setState({
isLoading: false,
categorydata: responseJson.data
});
})
.catch(error => {
this.setState({ error, loading: false });
});
}
__renderCategories = () => {
return(
<ScrollView>
<View style={styles.container}>
<FlatList
contentContainerStyle={styles.listContainer}
data={this.state.categorydata}
horizontal={false}
keyExtractor={({id}, index) => id.toString()}
renderItem={({item}) => {
return (
<View style={styles.categorycard}>
<View style={styles.cardContent}>
<Text style={styles.categoryname}> { item.name } </Text>
<View>
{this.__renderProducts(item.id,item.name)}
</View>
</View>
</View>
)
}
}
/>
</View>
</ScrollView>
)
}
__renderProducts = (cat_id,cat_name) => {
const url = 'https://controlf5.in/client-demo/groznysystems/wp-json/dokan/v1/stores/'+ storeid +'/products?cat_id=' + cat_id ;
fetch(url)
.then(res => res.json())
.then(responseJson => {
this.setState({
isLoading: false,
dataSource: responseJson
});
})
.catch(error => {
this.setState({ error, loading: false });
});
return(
<ScrollView>
<View style={styles.container}>
<FlatList
contentContainerStyle={styles.listContainer}
data={this.state.dataSource}
horizontal={true}
keyExtractor={({id}, index) => id.toString()}
renderItem={({item}) => {
return (
<View style={styles.card}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('ViewDetailItem', {
product_id: item.id,
}) }>
<View >
<View>
<Image key ={item.id} style={styles.cardImage} source={{uri:'https://controlf5.in/client-demo/groznysystems/wp-content/uploads/2013/06/T_3_front.jpg'}}/>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.count}>({item.id})</Text>
</View>
</View>
</TouchableOpacity>
</View>
)
}
}
/>
</View>
</ScrollView>
)
}
render（）{
return (
<ScrollView >
<View style={styles.headerContent}>
<View >
<ImageBackground
source={require('./Banner_2.jpg')}
style={{
height: 200,
width: 450,
position: 'relative', // because it's parent
}}
>
<View style={styles.headerContent}>
<Text style={styles.name}>
Carrefour-City Mall
</Text>
<Image style={styles.avatar}
source={require('./logo.png')}/>
</View>
</ImageBackground>
</View>
<View>
{this.__renderCategories()}
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create（{
categoryname:{
fontSize:14,
flex:1,
color:"#000",
marginLeft:4,
fontWeight: 'bold',
},
contentList:{
flex:1,
},
image:{
width:90,
height:90,
borderRadius:2,
borderWidth:2,
borderColor:"#ebf0f7"
},
card:{
shadowColor: '#00000021',
shadowOffset: {
width: 0,
height: 6,
},
marginLeft: 10,
marginRight: 10,
backgroundColor:"white",
padding: 10,
flexDirection:'row',
borderRadius:6,
},
categorycard:{
shadowColor: '#00000021',
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,
backgroundColor:"white",
padding: 5,
flexDirection:'row',
borderRadius:6,
},
container:{
flex:1,
},
listContainer:{
alignItems:'center',
},
cardHeader: {
paddingVertical: 17,
paddingHorizontal: 16,
borderTopLeftRadius: 1,
borderTopRightRadius: 1,
flexDirection: 'row',
alignItems:"center",
justifyContent:"center"
},
cardContent: {
paddingVertical: 8,
paddingHorizontal: 8,
justifyContent: 'space-between',
},
headerContent:{
alignItems: 'center',
},
avatar1: {
width: 300,
height: 300,
},
avatar: {
width: 80,
height: 80,
borderRadius: 63,
borderWidth: 4,
borderColor: "white",
marginBottom:10,
marginTop:10,
},
name:{
marginTop:10,
fontSize:13,
color:"#000000",
fontWeight:'300',
},
bodyContent: {
flex: 1,
alignItems: 'center',
padding:30,
},
textInfo:{
fontSize:18,
marginTop:20,
color: "#696969",
},
container:{
flex:1,
marginTop:20,
},
list: {
paddingHorizontal: 10,
},
listContainer:{
alignItems:'center'
},
cardImage:{
flex: 1,
height: 75,
width: 90,
},
imageContainer:{
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.32,
shadowRadius: 5.46,
},
count:{
marginTop:10,
fontSize:12,
color:"#000000",
fontWeight:'300',
},
}）;
使用Navigation（StoreProfile）导出默认值；