Question

正如我从许多帖子中看到的那样，FlatList渲染多次存在很大问题并导致一些问题。它真的很烦人，到目前为止我找不到任何解决方案，我想很多人都有相同的情况。

这是代码，所以当我提醒而不是看到一个值时，我看到不同的值包含undefined..undefined..real value..undefined。我也可以描述它，就像当我只放置1个元素（如{item.message}）时，它呈现双重并在...之间形成一些空间...就像总是一些奇怪的渲染，所以当我在某些东西上添加按事件时，我没有得到正确的新闻事件中提醒的价值..

如何解决这个平面列表渲染问题？

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>
        );
    }

Answer 1

奇怪但我解决了这个问题，也许很多人都有关于平面列表渲染的类似问题。所以问题是由后端引起的。

我在发送到react-native之前在后端创建了数组，我就是这样做的：

 $new = new Collection();

 $new[] = array('message' => $message->message);
 $new[] = array('id' => $message->id);
 $new[] = array('sender' => 'Sender: System');

return $new;

在我得到数组反应后，我试图在flatlist中呈现。我注意到它渲染了我添加新数组（）的数量，所以我通过执行以下操作来解决问题：

$new[] = array('message' => $message->message, 'key' => strval($message->id), 'sender' => 'Sender: System');

希望它可以帮助其他类似代码和问题的人！..

Answer 2

我不确定，但似乎（就我而言） renderItem将呈现所有项目，并取决于传递给data={this.state.messages}的数据数组中有多少元素，整个列表将再次重新呈现。

React Native FlatList呈现多次

2 个答案: