javascript - React Native FlatList 在添加新数据时重新渲染已经渲染的项目

Question

我已经实现了一个代码来监听我的数据库文档，当添加一个新文档时，应用程序会将其呈现为我的 FlatList 上的一个项目。
我遇到的问题是，每次我更新 FlatList 的数据时，已经渲染的项目一次又一次地重新渲染......
由于我的原始代码很复杂，我构建了一个 Snack:
https://snack.expo.io/@victoriomolina/flatlist-re-renders-all-components
我认为问题在于我使用现有数组的浅拷贝更新状态，但我这样做只是为了在添加新项目时重新渲染 FlatList(我不想重新渲染已经渲染的项目) .
谢谢你，我会非常感谢你的帮助。
Pd:在我的原始代码中，FlatList 的组件扩展了 React.PureComponent
我的真实密码
刷牙部分

  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const { firebase } = props;

    let postsArray = [];

    // Realtime database listener
    const unsuscribe = firebase
      .getDatabase()
      .collection("posts")
      .doc(firebase.getCurrentUser().uid)
      .collection("userPosts")
      .orderBy("date") // Sorted by upload date
      .onSnapshot((snapshot) => {
        let changes = snapshot.docChanges();

        changes.forEach((change) => {
          if (change.type === "added") {
            // Get the new post
            const newPost = change.doc.data();

            // Add the new post to the posts list
            postsArray.unshift(newPost);
          }
        });

        // Reversed order so that the last post is at the top of the list
        setPosts([...postsArray]); // Shallow copy of the existing array -> Re-render when new posts added
        setIsLoading(false);
      });

    /* Pd: At the first time, this function will get all the user's posts */

    return () => {
      // Detach the listening agent
      unsuscribe();
    };
  }, []);

平面列表

     <FlatList
          data={data}
          keyExtractor={keyExtractor}
          legacyImplementation={false}
          numColumns={1}
          renderItem={this.renderItem}
          getItemLayout={this.getItemLayout}
          initialNumToRender={12}
          windowSize={40}
          maxToRenderPerBatch={15}
          updateCellsBatchingPeriod={50}
          removeClippedSubviews
          ListFooterComponent={this.renderFooter()}
        />

渲染项方法

renderItem = ({ item, index }) => {
    const {
      images,
      dimensions,
      description,
      location,
      likes,
      comments,
      date,
    } = item;

    return (
      <View
        key={index}
        onLayout={({ nativeEvent }) => {
          this.itemHeights[index] = nativeEvent.layout.height;
        }}
      >
        <Card { /* Extends React.PureComponent */ }
          images={images}
          postDimensions={dimensions}
          description={description}
          location={location}
          likes={likes}
          comments={comments}
          date={date}
        />
      </View>
    );
  };

Answer 1

当您的数据更新时，组件会重新呈现。
为防止这种情况，您需要在调用 fetchData() 之前执行此行

useEffect(() => {
    if (data) return;
    fetchData();
}, [data]);

*edit: 将数据添加到依赖数组
将会发生的是 useEffect 将在组件加载时运行，并将调用 fetchData 函数更新您的状态，因此组件重新渲染，因此下一个渲染数据将具有任何值，因此 if 语句将阻止对 fetchData 的第二次调用。
我还建议使用 null 初始数据

const [data, setData] = useState(null);