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

Question

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

我有一个数组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])
  );

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

Answer 1

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

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

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

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