APi调用并呈现文本结果

Question

下面是对api的调用，console.log返回我想要的，但我想在<Text>{callOnmoTermsApi}</Text>中返回结果。我得到的错误是

Warning: Functions are not valid as a React child.

当我将Text更改为Button和console.log onPress操作时，它也会显示我想要的内容！请帮忙！！！

import { NavigationState } from '@react-navigation/routers';
import React, { useState } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { NavigationParams, NavigationSwitchProp } from 'react-navigation';
import { onmoTerms } from '@/api/authApi';
import OnmoButton from '@/components/Buttons/OnmoButton';
interface Props {
navigation: NavigationSwitchProp<NavigationState, NavigationParams>;
}
const OnmoTermsAndCond = () => {
const [terms] = useState('');
const callOnmoTermsApi = () => {
onmoTerms()
.then((resp: any) => {
if (resp.statusCode === 200) {
console.log('terms ', resp);
}
setTimeout(() => {
console.log('timeout terms ', resp);
}, 500);
})
.catch((error) => {
console.log(error);
});
};
return (
<SafeAreaView>
<Text>{callOnmoTermsApi}</Text>
</SafeAreaView>
);
};
export default OnmoTermsAndCond;

Answer 1

您需要将响应存储在一个状态中，可以使用useEffect，将空数组传递给useEffect将导致仅在装载时调用它

import { NavigationState } from '@react-navigation/routers';
import React, { useState, useEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { NavigationParams, NavigationSwitchProp } from 'react-navigation';
import { onmoTerms } from '@/api/authApi';
import OnmoButton from '@/components/Buttons/OnmoButton';
interface Props {
navigation: NavigationSwitchProp<NavigationState, NavigationParams>;
}
const OnmoTermsAndCond = () => {
const [terms] = useState('');
const [omno, setOmno] = useState(null)
useEffect(() => {
onmoTerms()
.then((resp: any) => {
if (resp.statusCode === 200) {
console.log('terms ', resp);
setOmno(resp)
}
setTimeout(() => {
console.log('timeout terms ', resp);
setOmno(resp)
}, 500);
})
.catch((error) => {
console.log(error);
});
}, []);
return (
<SafeAreaView>
<Text>{omno}</Text>
</SafeAreaView>
);
};
export default OnmoTermsAndCond;