在 ScrollView 中加载数据时出现问题

Question

我想制作一个 ScrollView，它使用从我的后端异步获取的数据。但是就目前而言，当我尝试呈现主题，甚至记录主题时，它给出了 return null ...我不知道如何让我的函数等到它得到主题。有什么解决办法吗？

return(
    <ScrollView >
        {console.log(subjects)}
        {subjects.map(renderSubject)}
    </ScrollView>
)

  const renderSubject = ({subject}) => {
    {console.log(subject)}
    return(
        <View style={styles.subjectTotalBlock}>
            <Text style={styles.students}>
                Students: {subject.nrOfStudents}
            </Text>
            <Text style ={styles.title}>
                {subject.name}
            </Text>
            <ReadMore
                numberOfLines={3}
                renderTruncatedFooter={_renderTruncatedFooter}
                renderRevealedFooter={_renderRevealedFooter}
                onReady={_handleTextReady}>
                <Text style={styles.shortDescription}>
                    {subject.description}
                </Text>
            </ReadMore>
        </View>
    );
}

这是获取主题的函数。

React.useEffect(()=> {
    const constructor = async () => {
        await refreshToken();
        let token = await getToken();
        let axios = require('axios');

        let config = {
            method: 'get',
            url: 'http://' + ipCamp + ':' + portNr + 
                '/subjectManagement/subjects',
            headers: {
                'Authorization': 'Bearer ' + JSON.parse(token)
            }
        };
        axios(config)
            .then(function (res) {
                setSubjects(res.data);
                setHasloaded(true);
                //console.log(res.data);
            }).catch(function (error) {
        });
    }
    constructor();
},[])

Answer 1

原因是“renderSubject”不会重新渲染，因此您会在日志中看到 null。如果您看到以下行中的数据：

//console.log(res.data);

我建议您使用 FlatList 而不是地图功能：

const SubjectsScreen = () => {
  const [subjects, setSubjects] = React.useState([])
  React.useEffect(() => {
    const constructor = async () => {
      await refreshToken();
      let token = await getToken();
      let axios = require('axios');

      let config = {
        method: 'get',
        url: 'http://' + ipCamp + ':' + portNr + '/subjectManagement/subjects',
        headers: {
          Authorization: 'Bearer ' + JSON.parse(token),
        },
      };
      axios(config)
        .then(function (res) {
          setSubjects(res.data);
          setHasloaded(true);
          //console.log(res.data);
        })
        .catch(function (error) {});
    };
    constructor();
  }, []);

  const Subject = ({subject}) => {
    return (
      <View style={styles.subjectTotalBlock}>
        <Text style={styles.students}>Students: {subject.nrOfStudents}</Text>
        <Text style={styles.title}>{subject.name}</Text>
        <ReadMore
          numberOfLines={3}
          renderTruncatedFooter={_renderTruncatedFooter}
          renderRevealedFooter={_renderRevealedFooter}
          onReady={_handleTextReady}>
          <Text style={styles.shortDescription}>{subject.description}</Text>
        </ReadMore>
      </View>
    );
  };
  
  return (
    <FlatList
      data={subjects}
      keyExtractor={item => item.id}
      renderItem={({item}) => {
        return <Subject subject={item} />;
      }}
    />
  );
};
export default SubjectsScreen;

在 ScrollView 中加载数据时出现问题

problems loading data in ScrollView

javascript

reactjs

react-native