例如:
<FlatList data={ this.state.foods, this.state.trees }
renderItem={({item}) => <View><Text>{item.food}</Text><Text>{item.tree}</Text></View>
/>
只要我具有相同的密钥(id
),是否有可能这样工作?
this.state.foods
:
[{
"id": "1",
"food":"chicken",
"cal":"1000",
}]
this.state.trees
:
[{
"id": "1",
"tree":"pine",
"size":"10",
}]
编辑:
render(){
const {trees, foods} = this.state
const combinedArray = trees.map(tree => Object.assign(tree, foods.find(food => food.id == tree.id)));
return(
componentDidUpdate(prevProps, prevState) {
if (!prevState.foods) {
fetch('https://www.example.com/React/food.php')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
foods: responseJson.map(item => ({ ...item, progress: new Animated.Value(0), unprogress: new Animated.Value(1) }))
}, function() {
});
})
.catch((error) => {
//console.error(error);
});
fetch('https://www.example.com/React/tree.php')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
trees: responseJson
}, function() {
});
})
.catch((error) => {
//console.error(error);
});
}
}
答案 0 :(得分:1)
您需要为array
data提供一个Flatlist
。
您可以根据id
对对象进行分组并使用它们
const {trees, foods} = this.state
const combinedArray = trees.map(tree => Object.assign(tree, foods.find(food => food.id == tree.id)));
,然后在combinedArray
中使用Flatlist
如果您的state
最初是undefined
或null
,则需要添加
constructor(props) {
super(props)
this.state = {
trees: [],
foods: []
}
}
您的班级组成部分。