是否有可能从函数中渲染/返回React Native元素?

Question

所以我想在React native中使用axios从我的服务器加载一些数据。数据已成功检索，但我不知道如何在页面上显示它。当我点击按钮'Load students'它做axios get方法，之后调用方法'showStudents'，但该方法不返回任何东西。我真的不明白在react native中渲染是如何工作的，所以我很感激任何帮助和指导。如果有更简单的方法可以做到这一切，我愿意听取建议。

export default function Students() {
const [s, setStudents] = useState('')
const getStudents = async () => {
try{
const {data: {students}} = await axios.get('http://192.168.1.2:3000/api/v1/students')
setStudents(students)
//console.log(students)
showStudents()
}
catch(error){
console.log(error)
}
}
const showStudents = () => {

return( <ScrollView>
{
s.map((student) => (
<ListItem key={student._id} bottomDivider>
<ListItem.Content>
<ListItem.Title>{student.firstName}</ListItem.Title>
<ListItem.Subtitle>{student.index}</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
))
}
</ScrollView>)

}

return (
<View style={styles.container}>
<Button title='Load students' color='green' onPress={getStudents}/>
</View>
);

}

Answer 1

函数showStudents返回一个JSX组件，但不在组件Students的render函数内。

您可以创建一个新的JSX组件，并使用条件渲染，以便在状态s(我称之为学生)未定义且长度严格大于零时渲染它。

const [students, setStudents] = useState()
const getStudents = async () => {
try{
const {data: {students}} = await axios.get('http://192.168.1.2:3000/api/v1/students')
setStudents(students)
}
catch(error){
console.log(error)
}
}
return (
<View style={styles.container}>
<Button title='Load students' color='green' onPress={getStudents}/>
{
students && students.length > 0 ? <ScrollView>
{
students.map((student) => (
<ListItem key={student._id} bottomDivider>
<ListItem.Content>
<ListItem.Title>{student.firstName}</ListItem.Title>
<ListItem.Subtitle>{student.index}</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
))
}
</ScrollView> : null
}
</View>
);

我们可以创建一个新的组件使事情更加结构化。让我们来介绍一下StudentList。

export function StudentList({students}) {
return <ScrollView>
{
students.map((student) => (
<ListItem key={student._id} bottomDivider>
<ListItem.Content>
<ListItem.Title>{student.firstName}</ListItem.Title>
<ListItem.Subtitle>{student.index}</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
))
}
</ScrollView> 
}

然后重用这个新组件。

const [students, setStudents] = useState()
const getStudents = async () => {
try{
const {data: {students}} = await axios.get('http://192.168.1.2:3000/api/v1/students')
setStudents(students)
}
catch(error){
console.log(error)
}
}
return (
<View style={styles.container}>
<Button title='Load students' color='green' onPress={getStudents}/>
{
students && students.length > 0 ? <StudentList students={students} /> : null
}
</View>
);