如何通過 FlatList 渲染組件？

Question

使用帶有 typescript 和 redux 工具包的 react native

嗨，我正在為通過 FlatList 呈現消息列表而煩惱。 通過 ScrollView 一切渲染良好，但我需要實現無限滾動。 所以我正在做這樣的事情

const MessagesScreen = () => {
  const companyId = useAppSelector(getCompanyId);
  const userId = useAppSelector(getUserId);

  const {
    data: messages,
    isLoading,
    refetch
  } = useGetMessagesQuery({ userId, companyId });
  useFocusEffect(refetch);

  return (
    <FlatList
      data={messages}
      renderItem={() => {
        <Messages messages={messages} />;
      }}
    />
  );
};

在return()中，我正在嘗試使用組件 Messages 呈現 FlatList，該組件位於此處：

const Messages = ({ messages }: { messages: Message[] }) => {
  const navigation =
    useNavigation<RootStackScreenProps<'DrawerNavigator'>['navigation']>();
  const { colors } = useTheme();

  return (
    <View style={styles.container}>
      {messages.map(message => {
        const createdAt = message.created_at;
        const isRead = message.read;
        const icon = isRead ? 'email-open-outline' : 'email-outline';
        const onClick = () => {
          navigation.navigate('Message', {
            messageId: message.id
          });
        };

        return (
          <TouchableOpacity key={message.id} onPress={onClick}>
            <View
              style={[styles.message, { borderBottomColor: colors.separator }]}
            >
              <View style={styles.iconPart}>
                <Icon
                  name={icon}
                  type="material-community"
                  style={
                    isRead
                      ? { color: colors.separator }
                      : { color: colors.inputFocus }
                  }
                  size={24}
                ></Icon>
              </View>
              <View style={styles.bodyPart}>
                <Text
                  numberOfLines={1}
                  style={[isRead ? styles.readSubject : styles.unReadSubject]}
                >
                  {message.subject}
                </Text>
                <Text
                  numberOfLines={1}
                  style={[isRead ? styles.readBody : styles.unReadBody]}
                >
                  {message.body}
                </Text>
              </View>
              <View style={styles.datePart}>
                <Text style={{ color: colors.shadow }}>
                  {dayjs(createdAt).fromNow()}
                </Text>
              </View>
            </View>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

實際上行為只是呈現錯誤的白屏

Possible Unhandled Promise Rejection (id: 17):
Error: Objects are not valid as a React child (found: object with keys {id, msg_type, created_at, subject, body, author, company_id, read}). If you meant to render a collection of children, use an array instead.

Answer 1

您的回調函數有問題：您沒有返回 Messages 組件

1：去掉花括號

 return ( <FlatList data={messages} renderItem={() => <Messages messages={messages}/> } /> );

2：添加return語句

 return ( <FlatList data={messages} renderItem={() => { return <Messages messages={messages} />; }} /> );

Answer 2

幾件事：

您錯誤地使用了 renderItem 回調：

<FlatList
      data={messages}
      renderItem={() => {
      // ^ ignoring the renderItem props
        return <Messages messages={messages} />;
      }}
    />

在這里，對於消息數組中的每個項目，您正在渲染一個組件並將所有消息傳遞給它。 所以你會得到重復的元素。

renderItem回調傳遞{item, index}其中 item 是數組中的當前項（索引是數組的索引）

在此處查看文檔： https ://reactnative.dev/docs/flatlist

通常的事情是 renderItem 回調一次渲染一個項目，如下所示：

<FlatList
      data={messages}
      renderItem={({item}) => {
        return <Message message={item} />;
      }}
    />

例如，我會制作一個僅呈現一項的<Message/>組件。