从fetch响应本机呈现无原语

Question

我是新来的反应，土生土长，并试图学习基础。我希望从后端获取一些数据，并将其整齐地呈现在自定义对象中。但是，我仍然得到同样的错误“对象是无效的react子对象.如果您打算呈现一个子集合，则使用数组代替。我可以使用原语(等等)使它工作，但是如何使用自定义对象？

我试着同时使用FlatList和Scrollview，但没有运气。

这是到代码图片的链接，还不允许嵌入图片:(

import React, { useEffect, useState } from "react";
import { View, Text, ScrollView } from 'react-native'
import Gleam from '../Elements/Gleam'

function CurrentGleamScreen() {
  const [gleamData, setGleamData] = useState([]);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    fetch('http://192.168.1.17:8080/getActualGleams')
      .then((response) => response.json())
      .then((json) => setGleamData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);
  return (
    <View>
      {isLoading ? <Text>Loading...</Text> :
        (
          <ScrollView>
            {gleamData.map(gleam => <Gleam key={gleam.headerText}>{gleam.bodyText}</Gleam>)}
          </ScrollView>
        )}
    </View>
  );
};

export default CurrentGleamScreen

Answer 1

很可能gleam.bodyText不是一个字符串，而是一个对象。不能只将一个对象插入到html元素中。如果你想要的话，你可以先把它转换成字符串。

<ScrollView>
  {gleamData.map(gleam => <Gleam key={gleam.headerText}>{JSON.stringify(gleam.bodyText)}</Gleam>)}
</ScrollView>