即使数据在数组中，React Native array.length 也会给我 0

Posted 2023-02-14

【中文标题】即使数据在数组中，React Native array.length 也会给我 0

【英文标题】：React Native array.length gives me 0 even when data is in array

【发布时间】：2022-01-23 01:37:09

【问题描述】：

我在一些看似简单得可笑的事情上遇到了麻烦，我不敢相信我不得不这样做。

我有一个数组messages: Message[] = [...]，我需要遍历它。但是，循环/映射没有发生。我已经尝试了我所知道的各种迭代，但似乎都不起作用。

这是我的代码：

const getMessages = (messages: Message[]) => 
  const cards = []
  // eslint-disable-next-line no-console
  console.log("Test 1: ", messages);
  // eslint-disable-next-line no-console
  console.log("Test 2: ", messages.length);
  // eslint-disable-next-line no-console
  console.log("Test 3: ", messages[0]);
  let i = 0;
  for (const msg of messages) 

    // eslint-disable-next-line no-console
    console.log("ADD TO LIST");
    cards.push(
      <MessageSummary
        key=i
        council=msg.council
        latestMessage=msg.content
        date=msg.date"
        hasBeenRead=false
      />
    );
    i += 1;
  ;
  if (cards.length > 0) 
    return messages;
  
  return (
    <Text style=styles.noApplicationsMessage>
      You don&apos;t have any messages yet
    </Text>
  );
;

在我的终端中，这是输出：

如您所见，当我登录messages 时，它会正确输出数据，但如果我尝试检查长度或访问元素，它就不起作用。

编辑

在这里我调用我的数据库以获取 messages 数据。

const processNewMessages = useCallback((newMessages: Message[]) => 
    setMessages(newMessages);
  , []);

  useFocusEffect(
    useCallback(() => 
      if (userExternalId < 0) 
        return;
      
      setLoading(true);
      getMessages(userExternalId)
        .then((messagesQuery) => processNewMessages(messagesQuery))
        .catch(() => 
          setError("Messages could not be fetched. Please try again later.");
          setShowBanner(true);
        )
        .finally(() => 
          setLoading(false);
        );
    , [processNewMessages, userExternalId])
  );

感谢任何可以提供帮助的人，谢谢。

【问题讨论】：

你能详细说明一下什么是 userExternalId 类型，虽然它看起来不像一个数组。

【参考方案1】：

数组总是通过引用调用。当你安慰这三个人时，

messages 最初是空数组// 通过引用调用 因此 messages.length 为 0 //按值调用 因此 messages[0] 未定义。 //按值调用

但由于 console.log(messages) 是通过引用调用的，它稍后会更新为正确的数据，但其他 2 个控制台没有更新。

看起来您传递的消息数组来自异步调用，请尝试使用异步等待并仅在消息数据到达时调用该函数。

【讨论】：

您好，感谢您的评论。所以messages 数据来自我的数据库。我在一个屏幕上使用useFocusEffect 来获取这些数据，这是一个承诺。但没有意义的是，我在应用程序的不同部分采用完全相同的方法，但效果很好。

你能从你做这个api调用和调用这个函数的地方添加那部分的代码吗？也许这可以帮助找到问题。

我已经添加了上面的代码，getMessages() 函数只是查询数据库，并返回一个Message[]。它是异步的。