如何通過FlatList渲染組件？

使用帶有 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.

uj5u.com熱心網友回復：

您的回呼函式有問題： 您沒有回傳 Messages 組件

1：去掉花括號

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

2：添加return陳述句

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

uj5u.com熱心網友回復：

幾件事：

您錯誤地使用了 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/>只呈現一個專案的組件。

標籤：javascript 反应 打字稿 反应式 还原

上一篇：railsfaradayforAPI呼叫問題

下一篇：用相應的變數值替換變數名