我正在使用 Axios 在 TSX 的這個 Class 組件中從我的 API 中檢索我的資料。它沒有給出任何錯誤，它只是不顯示我的影像，甚至不顯示 console.log 中的資料。我現在正在使用帶有 tsx 的類組件，因為在我之前嘗試讓影片滑塊作業時，我使用了：jsx 中的類組件，tsx 中的類組件，JSX 中的函式以及 TSX 中的鉤子。每次嘗試都會出現我無法解決的不同錯誤，這就是我現在使用此策略的原因，我想我現在已經接近解決方案了，只是沒有查看資料。
提前致謝
class MyComponent extends Component {
componentDidMount() {
LogBox.ignoreLogs(['Animated: `useNativeDriver`'])
}
position
rotate: number
rotateAndTranslate
likeOpacity
dislikeOpacity
nextCardOpacity
nextCardScale
PanResponder
imagesData: Images[]
mySpecialFunction() {
console.log('Images data:', this.imagesData)
}
constructor(props) {
super(props)
LogBox.ignoreLogs(['Animated: `useNativeDriver`'])
axios
.get<Images[]>(
'https://api.thecatapi.com/v1/images/search?breed_ids=beng&include_breeds=true',
)
.then((response: AxiosResponse) => {
this.imagesData = response.data
})
this.position = new Animated.ValueXY()
this.state = {
currentIndex: 0,
}
this.rotate = this.position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: ['-30deg', '0deg', '10deg'],
extrapolate: 'clamp',
})
this.rotateAndTranslate = {
transform: [
{
rotate: this.rotate,
},
...this.position.getTranslateTransform(),
],
}
this.likeOpacity = this.position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: [0, 0, 1],
extrapolate: 'clamp',
})
this.dislikeOpacity = this.position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: [1, 0, 0],
extrapolate: 'clamp',
})
this.nextCardOpacity = this.position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: [1, 0, 1],
extrapolate: 'clamp',
})
this.nextCardScale = this.position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: [1, 0.8, 1],
extrapolate: 'clamp',
})
}
UNSAFE_componentWillMount() {
this.PanResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
this.position.setValue({ x: gestureState.dx, y: gestureState.dy })
},
onPanResponderRelease: (evt, gestureState) => {
if (gestureState.dx > 120) {
Animated.spring(this.position, {
toValue: { x: SCREEN_WIDTH 100, y: gestureState.dy },
useNativedriver: true,
}).start(() => {
this.setState({ currentIndex: this.state.currentIndex 1 }, () => {
this.position.setValue({ x: 0, y: 0 })
})
})
} else if (gestureState.dx < -120) {
Animated.spring(this.position, {
toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy },
useNativedriver: true,
}).start(() => {
this.setState({ currentIndex: this.state.currentIndex 1 }, () => {
this.position.setValue({ x: 0, y: 0 })
})
})
} else {
Animated.spring(this.position, {
toValue: { x: 0, y: 0 },
friction: 4,
useNativedriver: true,
}).start()
}
},
})
}
renderUsers = () => {
if (this.imagesData) {
return this.imagesData
.map((item, i) => {
if (i < this.state.currentIndex) {
return null
} else if (i == this.state.currentIndex) {
return (
<Animated.View
{...this.PanResponder.panHandlers}
key={item.id}
style={[
this.rotateAndTranslate,
{
height: SCREEN_HEIGHT - 120,
width: SCREEN_WIDTH,
padding: 10,
position: 'absolute',
},
]}
>
<Animated.View
style={{
opacity: this.likeOpacity,
transform: [{ rotate: '-30deg' }],
position: 'absolute',
top: 50,
left: 40,
zIndex: 1000,
}}
>
<Text
style={{
borderWidth: 1,
borderColor: 'green',
color: 'green',
fontSize: 32,
fontWeight: '800',
padding: 10,
}}
>
LIKE
</Text>
</Animated.View>
<Animated.View
style={{
opacity: this.dislikeOpacity,
transform: [{ rotate: '30deg' }],
position: 'absolute',
top: 50,
right: 40,
zIndex: 1000,
}}
>
<Text
style={{
borderWidth: 1,
borderColor: 'red',
color: 'red',
fontSize: 32,
fontWeight: '800',
padding: 10,
}}
>
NOPE
</Text>
</Animated.View>
<Image
style={{ height: '86%', width: null, borderRadius: 10 }}
source={{ uri: `${item.url}` }}
/>
<View
style={{
backgroundColor: '',
color: 'black',
fontSize: 20,
fontWeight: '800',
position: 'absolute',
bottom: 95,
right: 40,
zIndex: 1000,
width: '85%',
height: '20%',
borderRadiusTop: 20,
}}
>
<Text
style={{ color: 'white', fontSize: 32, fontWeight: '800' }}
>
Black cat
</Text>
<Text
style={{ color: 'white', fontSize: 18, fontWeight: '600' }}
>
Black cat family
</Text>
<View style={styles.iconen}>
<Ionicons style={styles.icon} name="timer" />
<Text style={styles.subtitle}>
{item.breeds[0].life_span}
</Text>
<Ionicons style={styles.icon} name="barbell-outline" />
<Text style={styles.subtitle}>
{item.breeds[0].weight.metric}
</Text>
<Ionicons style={styles.icon} name="earth" />
<Text style={styles.subtitle}>
{item.breeds[0].country_code}
</Text>
</View>
</View>
</Animated.View>
)
} else {
return (
<Animated.View
key={item.id}
style={[
{
opacity: this.nextCardOpacity,
transform: [{ scale: this.nextCardScale }],
height: SCREEN_HEIGHT - 120,
width: SCREEN_WIDTH,
padding: 10,
position: 'absolute',
},
]}
>
<Animated.View
style={{
opacity: 0,
transform: [{ rotate: '-30deg' }],
position: 'absolute',
top: 50,
left: 40,
zIndex: 1000,
}}
>
<Text
style={{
borderWidth: 1,
borderColor: 'green',
color: 'green',
fontSize: 32,
fontWeight: '800',
padding: 10,
}}
>
LIKE
</Text>
</Animated.View>
<Animated.View
style={{
opacity: 0,
transform: [{ rotate: '30deg' }],
position: 'absolute',
top: 50,
right: 40,
zIndex: 1000,
}}
>
<Text
style={{
borderWidth: 1,
borderColor: 'red',
color: 'red',
fontSize: 32,
fontWeight: '800',
padding: 10,
}}
>
NOPE
</Text>
</Animated.View>
<Image
style={{ height: '86%', width: null, borderRadius: 10 }}
source={{ uri: `${item.url}` }}
/>
</Animated.View>
)
}
})
.reverse()
}
}
render() {
return (
<View>
<View>{this.renderUsers()}</View>
<View style={{ height: SCREEN_HEIGHT - 80 }}>
<ButtonVote />
</View>
</View>
)
}
}
uj5u.com熱心網友回復：
嘗試這種方式，在 API 回應后使用狀態來反映更改
class MyComponent extends Component {
state = {
imagesData: [],
};
// rest of the code remains the same
componentDidMount() {
axios.get(`xxxxxx`).then((res) => {
const imagesData = res.data;
this.setState({ imagesData });
});
}
renderUsers = () => {
if (this.state.imagesData) {
return this.state.imagesData.map((item, i) => {}).reverse();
}
};
render() {
return <View></View>;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/467121.html