我无法使用 FlatList 渲染功能组件

Question

我在这个问题上花了太多时间，我看不出我的错误在哪里。我有一个功能组件CommentsList，我想在其中呈现 cmets 列表。此外，我还有Comments.js，它是功能组件，它将呈现评论本身的详细信息。这是CommentsList.js的代码：

import React, { useState, useEffect } from 'react';
import { View,
        Text,
        FlatList,
        ScrollView} from 'react-native';

import Comment from './Comment';

import firebase from 'firebase';
require('firebase/firestore');

const CommentsList = ({userId, postId}) => {

  const [comments, setComments] = useState([])

  useEffect(() => {
      getComments();
  }, [])

  const getComments = () => {
          firebase.firestore()
              .collection('comments')
              .orderBy('creation', 'desc')
              .get()
              .then((snapshot) => {
                  let comments = snapshot.docs.map(doc => {
                      const data = doc.data();
                      const id = doc.id;
                      return { id, ...data }
                  })
                  setComments(comments)
              });
  }

  return (
      <ScrollView>
          <FlatList
              numColumns={1}
              horizontal={false}
              data={comments}
              keyExtractor={item => item.id}
              renderItem={({item}) => <Comment comment={item} /> }
          />
      </ScrollView>
  )
}


export default CommentsList;

如您所见，在FlatList 中，我正在尝试渲染Comment 组件。这是我非常简化的Comment.js：

import React from 'react';
import { View, Text} from 'react-native';

const Comment = () => {
   return (
     <View>
         <Text>
             Other comment
          </Text>
      </View>
    )
}

export default Comment;

显然，我想在Comment.js 中添加其他部分，但目前我真的不能。我有以下错误：Error: Text strings must be rendered within a <Text> component. 当我将我的Comment.js 组件更改为：

import React from 'react';
    import { View, Text} from 'react-native';
    
    const Comment = () => {
       return (
             <Text>
                 Other comment
              </Text>
        )
    }
    
    export default Comment;

这一切都完美呈现，我看到了评论，但显然我需要 View 元素来包装我的组件，因为它不仅仅是我想要显示的文本。我想显示姓名、时间等。但我不能，因为我总是显示Error: Text strings must be rendered within a <Text> component. 错误。我一次又一次地尝试简化我的Comment.js 组件，只是为了让它工作，这是一个非常简化的版本，但它不会渲染。

任何建议都会受到欢迎，因为我在这个问题上花了太多时间。

Answer 1

它看起来是正确的代码，应该可以工作。

您可以做的一件事是对代码进行格式化，以避免任何间距问题。