響應本機FlatList多次渲染

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;

在我讓數組反應為原生之后，我試圖在平面列表中進行渲染。 我注意到它呈現的數量與我添加新的array（）一樣多，因此我通過執行以下操作解決了該問題：

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

希望它可以幫助其他人誰是類似的代碼和問題！

Answer 2

我不確定，但是（在我的情況下）renderItem似乎將渲染所有項目，並取決於傳遞給data={this.state.messages}的data={this.state.messages}數組中有多少個元素，整個列表將重新呈現再次。