기능 구성 요소 axios.get()가 있고 요청 응답에 따라 동적으로 일부 구성 요소 에서 데이터를 가져 오고 렌더링 하려고합니다 .
나는 경우 console.log응답은 Ok,하지만 내 문제에서 수익을 사용하는 방법은 axios.get()화면에 구성 요소를 만들 수 있습니다.
나는 간단한 배열로 시도했고 그것을 사용하여 구성 요소를 만들 수 있습니다. 내가 원하는 것은 배열에서했던 것과 같은 방식으로 화면에 구성 요소를 만드는 것입니다.
나는 내 게시물을 게시하기 전에 많은 게시물을 읽었습니다. 도움이나 안내를 부탁드립니다.
import React, { createElement, useState, useEffect } from 'react';
import { Text, StyleSheet, View, TouchableOpacity, Image } from 'react-native';
import axios from 'axios';
const HomeScreen = ({ navigation }) => {
axios.get("http://100.103.16.113:8081/api/checklists", {
}).then
(function (response) {
console.log(response.data);
}).catch(error => {
console.log(error);
})
const checklists = [{
"id": 1,
"checklisT_DESCRIPTION": "CHECKLIST 1"
},
{
"id": 2,
"checklisT_DESCRIPTION": "CHECKLIST 2"
},
{
"id": 3,
"checklisT_DESCRIPTION": "CHECKLIST 3"
}
]
return (
<View >
<Text style={styles.text}> Select an Audit</Text>
<View style={styles.maincontainer}>
<View style={styles.container}>
{}
{checklists.map(r => (
<TouchableOpacity onPress={() => navigation.navigate('AuditS')} style={styles.button}
>
<Image source={require('../assets/icons8-audit-80.png')} style={styles.Image}></Image>
<Text style={styles.ButtonText}>{r.checklisT_DESCRIPTION}</Text>
</TouchableOpacity >
))}
</View>
</View>
<View style={styles.bottomcontainer}>
<TouchableOpacity onPress={() => navigation.navigate('Login')}
>
<Text style={styles.logout}>LOGOUT</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 50,
fontFamily: 'Comfortaa-Regular',
alignItems: "center",
textAlignVertical: "center",
textAlign: "center",
justifyContent: "center",
},
container: {
marginTop: 50,
flexDirection: "row",
marginLeft: 50,
width: '100%'
},
maincontainer: {
flexDirection: "column",
width: '80%',
alignContent: "center",
justifyContent: "center",
},
bottomcontainer: {
marginTop: '70%',
width: '100%',
alignItems: "center",
justifyContent: "flex-end",
alignContent: "flex-end",
},
logout: {
marginTop: 50,
margin: 15,
height: 60,
width: 440,
borderColor: '#000000',
backgroundColor: '#000000',
borderWidth: 2,
borderRadius: 10,
fontSize: 18,
textAlign: "center",
textAlignVertical: "center",
color: "#FFFFFF",
fontFamily: 'Comfortaa-Bold'
},
button: {
backgroundColor: '#0f99f5',
fontSize: 16,
color: '#FFF',
width: 150,
height: 150,
borderRadius: 10,
textAlignVertical: "bottom",
textAlign: "center",
marginVertical: 20,
marginHorizontal: 10,
fontFamily: 'Comfortaa-Bold'
},
ButtonText: {
textAlignVertical: "bottom",
textAlign: "center",
fontSize: 16,
color: '#FFF',
marginHorizontal: 10,
fontFamily: 'Comfortaa-Bold'
},
Image: {
width: "50%",
height: "50%",
alignContent: "center",
alignSelf: "center",
marginTop: 10,
marginBottom: 10
}
});
export default HomeScreen;
당신의 상태 변수를 만들 수 있습니다 checklists후 사용하여 채울 axios.get내부를 useEffect. checklists.length목록을 매핑하기 전에 확인 하고 항목을 렌더링하기 위해 데이터에 액세스하여 체크리스트가 채워 졌는지 여부를 확인하십시오 .
const HomeScreen = ({ navigation }) => {
// initialize the state variable
const [checklists, setChecklists] = useState([]);
// populate the data
useEffect(() => {
axios.get("http://100.103.16.113:8081/api/checklists")
.then(function (response) {
setChecklists(response.data)
})
.catch(error => {
console.log(error);
})
}, [])
// when mapping over the checklists make sure you check for the checklists.length before mapping
{checklists.length && checklists.map(r =>(
<TouchableOpacity onPress = {() => navigation.navigate('AuditS')}
style={styles.button}
>
<Image source={require('../assets/icons8-audit-80.png')}
style={styles.Image}>
</Image>
<Text style={styles.ButtonText}>{r.checklisT_DESCRIPTION}</Text>
</TouchableOpacity >
))}
}
다음은 예제 코드입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다