[英]React Native FlatList Renders Multiple Times
As I see from many posts that there is a huge problem about FlatList rendering multiple times and causes some problem. 从许多帖子中可以看出,FlatList多次渲染存在一个巨大的问题,并导致了一些问题。 Its really annoying and so far I couldnt find any solution for this, and I guess many people have the same situation.
这确实很烦人,到目前为止我找不到任何解决方案,我想很多人也有同样的情况。
Here is the code, so when I alert instead of seeing one value, I see different values which contains undefined..undefined..real value..undefined . 这是代码,因此当我发出警报而不是看到一个值时,我看到了包含undefined..undefined..real value..undefined的不同值。 I can also describe it like when I put only 1 element (like {item.message} ) it renders double and makes some spaces between.. like always some strange rendering, so when I add press event on something, I dont get the proper value to alert in press event..
我也可以描述它,就像当我只放置1个元素(例如{item.message})时一样,它会渲染两倍并在它们之间留出一些空格。在新闻事件中发出警报的值。
How to solve this flatlist rendering problem?? 如何解决这个扁平化列表呈现问题?
render(){
return(
<View>
<FlatList
data={this.state.messages}
renderItem={({item}) =>
<View key={item.id}>
<Text> {item.sender} </Text>
<TouchableOpacity onPress={() => alert(item.id)} >
<Text>{item.message} {item.id}</Text>
</TouchableOpacity>
</View>
}
/>
</View>
);
}
Strange but I solved the problem, and maybe many people have similar problems about flatlist rendering. 很奇怪,但是我解决了这个问题,也许很多人在平面列表渲染方面也有类似的问题。 So problem was caused by backend.
因此问题是由后端引起的。
I was creating array in backend before sending to react-native, and there I was doing like this: 我在发送到react-native之前在后端创建数组,而我在这样做:
$new = new Collection();
$new[] = array('message' => $message->message);
$new[] = array('id' => $message->id);
$new[] = array('sender' => 'Sender: System');
return $new;
and after I get the array to react-native I was trying to render in flatlist. 在我让数组反应为原生之后,我试图在平面列表中进行渲染。 I noticed that it renders as many as I added new array(), so I fixed the problem by doing:
我注意到它呈现的数量与我添加新的array()一样多,因此我通过执行以下操作解决了该问题:
$new[] = array('message' => $message->message, 'key' => strval($message->id), 'sender' => 'Sender: System');
Hope it can help some other people who was similar codes and problem!.. 希望它可以帮助其他人谁是类似的代码和问题!
我不确定,但是(在我的情况下)renderItem似乎将渲染所有项目,并取决于传递给data={this.state.messages}
的data={this.state.messages}
数组中有多少个元素,整个列表将重新呈现再次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.