如何将道具中的对象数组发送到 React Native 中的自定义组件？

Question

当我使用 axios 获取请求从 API 获取时，我有一个数组，如下所示：

useEffect(async () => {
    console.log("here");
    let accessToken = await AsyncStorage.getItem("accessToken");
    const response = await axios
      .get(API_URL + "/feed", {
        headers: {
          Authorization: "Bearer " + accessToken,
        },
      })
      .then((response) => {
        setFeedItems([]);
        setFeedItems((feedItems) => [...feedItems, ...response.data]);
        setIsLoading(false);
      });
  }, []);

我有一个自定义组件，它是 Report.js，我想使用以下代码将一些信息从这个屏幕发送到该组件：

{isLoading == false && (
        <FlatList
          style={{ marginLeft: 10, marginRight: 10 }}
          data={feedItems}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <Report
              name="mustafa"
              username="mustafa123"
              responsibleInstitution="responsible"
              userId={item.userId}
              category={item.category}
              location={item.location}
              institutionId={item.institutionId}
              description={item.description}
              upvotes={item.upvotes}
              comments={item.comments}
            />
          )}
        ></FlatList>

来自 API 的数据的形状如下：

[
    {
        "id": "6228a72cfc2ce87bb0b5f908",
        "userId": "61cab704ee5f9a5cc3bd844c",
        "institutionId": "61cabb2da10a9147a53e6480",
        "solutionId": null,
        "description": "Kayıp ilanı..",
        "category": "Missing",
        "comments": [
            {
                "id": "6228c0933ab2f166af0a9d23",
                "userId": "61cab704ee5f9a5cc3bd844c",
                "text": "Tamam kardeş anladık",
                "date": "2022-03-09T14:58:27.091+00:00"
            },
            {
                "id": "6228c98534572422056eb565",
                "userId": "61cab704ee5f9a5cc3bd844c",
                "text": "Tamam kardeş anladık 3",
                "date": "2022-03-09T15:36:37.256+00:00"
            }
        ],
        "upvotes": [
            "61cab704ee5f9a5cc3bd844c"
        ],
        "location": null,
        "report_image_link": null,
        "file": null,
        "date": "2022-03-09T13:10:04.273+00:00"
    },

从数据中可以看出，“comments”字段有一个包含 id、userId、text 和 date 字段的对象数组。 每当我运行代码时，我都会收到以下由comments={item.comments}行引起的错误。

错误：Objects are not valid as a React child (found: object with keys {id, userId, text, date}). 如果您打算渲染子集合，请改用数组。

我想要做的是，每当用户单击 Report.js 组件中的按钮时，我想打开一个模式并在该组件上向用户显示评论。 你认为我应该改变我的方式吗？ 如何将评论信息发送到Report组件？ 如果我的做法不正确，我该怎么办？

Answer 1

由于comments是一个对象数组，您不能将其作为child项传递给Text组件。 现在，这取决于您希望如何可视化数据。 这是使用FlatList的可能解决方案。 您可以用最适合您的方式替换呈现的组件。

const dummyData =  [
            {
                "id": "6228c0933ab2f166af0a9d23",
                "userId": "61cab704ee5f9a5cc3bd844c",
                "text": "Tamam kardeş anladık",
                "date": "2022-03-09T14:58:27.091+00:00"
            },
            {
                "id": "6228c98534572422056eb565",
                "userId": "61cab704ee5f9a5cc3bd844c",
                "text": "Tamam kardeş anladık 3",
                "date": "2022-03-09T15:36:37.256+00:00"
            }
        ]

const App = () => {
  const [data, setData] = useState(dummyData);
  

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View>
        <FlatList
          data={data}
          renderItem={({item}) => {
            return <Text style={{margin: 20}}>`ID: ${item.id} userId: ${item.userId} text: ${item.text} date: ${item.date}`</Text>
          }}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    </SafeAreaView>
  );
};