每次更新列表中的数据时，我都应该使用useEffect重新加载列表吗？

Question

此问题是以下问题here

的可能解决方案（本人尚未测试）

我读了一个博客文章here，其中指出了将hooks与flatlist结合使用的正确方法。

但是我不相信，我相信会有更好/更简单的方法。我也对以下事实感到困惑：一旦其他useEffect加载了页面，就不会再使用用于获取初始数据的useEffect（触发器设置为空数组[]）触发

谢谢。

旧问题

设置/场景

我正在使用twitter api来获取数据，并使用react-native-socials将其呈现在twitter卡中。 推文数据（JSON）通过我的后端存储和提供，并在应用程序中呈现。

我正在使用平面列表来呈现此数据。

问题

对于前三个负载来说，它工作正常，我正在pullToRefresh中使用flatlist进行网络调用以获取新数据。

但是当我第四次尝试时，它会得到一个undefined元素。

我已将Twitter元素（来自react-native-socials lib）替换为Text元素，然后输出中没有undefined并且不会崩溃。

此undefined导致元素在试图从传递给Twitter元素的json数据中获取特定键的位置崩溃。

更重要的是，我尝试将其记录在链上，但没有成功。我必须进入库并在对象被解构和分配的位置添加console.log。

相关代码

• 平面列表组件

<FlatList
      ref={refContainer}
      data={feed}
      keyExtractor={(post) => {
        return post.id.toString();
      }}
      ListHeaderComponent={ListHeaderComponent}
      renderItem={({ item }) => (
        <View
          style={{
            padding: 10,
            borderRadius: 35,
            backgroundColor: colors.white,
          }}
        >
          {item && item.type == postType.TWEET && (
            <Twitter useCustomTweetExtendedData={item.content} />
          )}

• 库中的代码：node_modules/react-native-socials/dist/src/Twitter/api.js 它在data.created_at中出错，因此我添加了console.log

export var adapter = function (data) {
  console.log("typeof : "+ typeof(data) + " full_text : " + entities.decode(data?.full_text.slice(0, 10)));
  var _a, _b, _c, _d, _e, _f;
  var response = {
    createdAt: data.created_at,
    id: data.id,

我已经尝试过的东西：

1. 提供默认值-是否仍然发生错误
2. useEffect for feed-第一次调用loadFeed来设置feed
时无法执行此操作

我在这里问之前提到的一些文章：

1. This discusses quite a few strategies

问题

1. 为什么错误仅发生在第三个网络呼叫中（是的，它是一致的）？ -有足够的数据来获取至少10个此类调用
2. 为什么它没有登录到链条中？
3. 我已经进行了如下检查：{item && item.type == postType.TWEET && ，但是它如何进入组件并产生错误？
4. 我该如何解决

我读了this - useState set method not reflecting change immediately，但不了解如何使用它来解决问题。

非常感谢。

更新

在关于reddit here的建议上，我添加了一种null rejector类的东西data.filter(obj => obj)，但这似乎也无济于事：//

我正在使用平面列表来呈现从后端服务器获取的对象的完整阵列。

我用Postman检查了数据，一切正常，那里没有空值。

这是我的feed加载代码。

const loadFeed = async (typeOfFeed, old = false) => {
    setRefreshing(true);
    let url = "";
    if (old) {
        url = FeedCursor.next;
    }
    const response = await postsApi.getPosts(typeOfFeed, url);
    if (response.ok) {
      if (response.data[0].id == feed[0]?.id) {
        ToastAndroid.show("No new posts", ToastAndroid.SHORT);
      } else if (response.data.length > 0) {
          setFeedCursor({
            next: response.headers.next,
            previous: response.headers.previous,
          });
        }
        response.data.filter((obj) => obj);    // Updated this
        setFeed(response.data);
      }
    } else {
      ToastAndroid.show("No new posts", ToastAndroid.SHORT);
      console.error(response.problem);
    }
    setRefreshing(false);
  };

另一件事是，在此之前，在先前的加载中它提到：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.