Typescript 反应本机映射axios而不是导入的文件
我正在研究React Native，我把它分叉了，我有一个返回平面列表的函数，它呈现一个映射变量twitts的函数。我想尝试使用Axios而不是数据导入文件，如下代码所示：Typescript 反应本机映射axios而不是导入的文件,typescript,react-native,axios,Typescript,React Native,Axios,我正在研究React Native，我把它分叉了，我有一个返回平面列表的函数，它呈现一个映射变量twitts的函数。我想尝试使用Axios而不是数据导入文件，如下代码所示： feed.tsx import React from 'react'; import {FlatList, View, StyleSheet} from 'react-native'; import {StackNavigationProp} from '@react-navigation/stack';
feed.tsx
import React from 'react';
import {FlatList, View, StyleSheet} from 'react-native';
import {StackNavigationProp} from '@react-navigation/stack';
import {useTheme} from 'react-native-paper';
import axios from 'axios';
import {Twitt} from './components/twitt';
import {twitts} from './data';
import {StackNavigatorParamlist} from './types';
type TwittProps = React.ComponentProps<typeof Twitt>;
function renderItem({item}: { item: TwittProps }) {
return <Twitt {...item} />;
}
function keyExtractor(item: TwittProps) {
return item.id.toString();
}
type Props = {
navigation?: StackNavigationProp<StackNavigatorParamlist>;
};
export const Feed = (props: Props) => {
const theme = useTheme();
var response = axios.get('https://api.themoviedb.org/3/movie/popular?api_key=49f0f29739e21ecda580cd926a19075e&language=en-US&page=1');
const data = response.data.result.map(twittProps => ({
...twittProps,
onPress: () =>
props.navigation &&
props.navigation.push('Details', {
...twittProps,
}),
}));
return (
<FlatList
contentContainerStyle={{backgroundColor: theme.colors.background}}
style={{backgroundColor: theme.colors.background}}
data={data}
renderItem={renderItem}
keyExtractor={keyExtractor}
ItemSeparatorComponent={() => (
<View style={{height: StyleSheet.hairlineWidth}}/>
)}
/>
);
};
feed.tsx
从“React”导入React；
从“react native”导入{FlatList，View，StyleSheet}；
从'@react navigation/stack'导入{StackNavigationProp}；
从“react native paper”导入{useTheme}；
从“axios”导入axios；
从“./components/Twitt”导入{Twitt}；
从“./data”导入{twitts}；
从“./types”导入{StackNavigatorParamlist}；
TwittProps类型=React.ComponentProps；
函数renderItem（{item}:{item:TwittProps}）{
返回；
}
功能键提取器（项目：TwittProps）{
return item.id.toString（）；
}
类型道具={
导航？：StackNavigationProp；
};
导出常量提要=（道具：道具）=>{
const theme=useTheme（）；
var response=axios.get（'https://api.themoviedb.org/3/movie/popular?api_key=49f0f29739e21ecda580cd926a19075e&language=en-美国&page=1’；
const data=response.data.result.map（twittProps=>({
…小道具，
onPress:（）=>
导航道具&&
props.navigation.push（'Details'{
…小道具，
}),
}));
返回(
(
)}
/>
);
};
import React from 'react';
import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
import {
Surface,
Title,
Caption,
Text,
Avatar,
TouchableRipple,
useTheme,
} from 'react-native-paper';
import {MaterialCommunityIcons} from '@expo/vector-icons';
import color from 'color';
type Props = {
id: number;
adult: boolean,
popularity: number,
vote_count: number,
video: boolean,
poster_path: string,
backdrop_path: string,
original_language: string,
original_title: string,
genre_ids: any,
title: string,
vote_average: number,
overview: string,
release_date: string,
onPress: (id: number) => void;
};
export const Twitt = (props: Props) => {
const theme = useTheme();
const iconColor = color(theme.colors.text)
.alpha(0.54)
.rgb()
.string();
const contentColor = color(theme.colors.text)
.alpha(0.8)
.rgb()
.string();
const imageBorderColor = color(theme.colors.text)
.alpha(0.15)
.rgb()
.string();
return (
<TouchableRipple onPress={() => props.onPress(props.id)}>
<Surface style={styles.container}>
<View style={styles.leftColumn}>
<Image style={styles.movieImg} source={{uri: "https://image.tmdb.org/t/p/w500/" +props.backdrop_path }}/>
</View>
<View style={styles.rightColumn}>
<View style={styles.topRow}>
<Title>{props.title}</Title>
<Caption style={[styles.handle, styles.dot]}>{'\u2B24'}</Caption>
</View>
<Text style={{color: contentColor}}>{props.overview}</Text>
<View style={styles.bottomRow}>
<View style={styles.iconContainer}>
<MaterialCommunityIcons
name="star-circle"
size={20}
color={iconColor}
/>
<Caption style={styles.iconDescription}>
{props.vote_average}
</Caption>
</View>
<View style={styles.iconContainer}>
<MaterialCommunityIcons
name="thumb-up-outline"
size={20}
color={iconColor}
/>
<Caption style={styles.iconDescription}>
{props.popularity}
</Caption>
</View>
<View style={styles.iconContainer}>
<MaterialCommunityIcons
name="calendar"
size={20}
color={iconColor}
/>
<Caption style={styles.iconDescription}>{props.release_date}</Caption>
</View>
</View>
</View>
</Surface>
</TouchableRipple>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingTop: 15,
paddingRight: 15,
},
leftColumn: {
width: 100,
alignItems: 'center',
padding: 10
},
rightColumn: {
flex: 1,
},
topRow: {
flexDirection: 'row',
alignItems: 'baseline',
},
handle: {
marginRight: 3,
},
dot: {
fontSize: 3,
},
image: {
borderWidth: StyleSheet.hairlineWidth,
marginTop: 10,
borderRadius: 20,
width: '100%',
height: 150,
},
bottomRow: {
paddingVertical: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
iconContainer: {
flexDirection: 'row',
alignItems: 'center',
},
iconDescription: {
marginLeft: 2,
lineHeight: 20,
fontSize: 15
},
movieImg: {
width: "100%",
height: 100,
}
});
从“React”导入React；
从“react native”导入{样式表、视图、图像、TouchableOpacity}；
进口{
表面，
标题
说明文字
文本，
阿凡达
触感涟漪，
使用主题，
}来自“react native paper”；
从“@expo/vector icons”导入{MaterialCommunityIcons}；
从“颜色”导入颜色；
类型道具={
id：编号；
成人：布尔，
人气：数字，
计票：人数，
视频：布尔，
海报路径：字符串，
路径：字符串，
原始语言：字符串，
原始标题：字符串，
类型识别码：任何，
标题：字符串，
平均投票数：，
概述：字符串，
发布日期：string，
onPress：（id:number）=>void；
};
导出常量Twitt=（道具：道具）=>{
const theme=useTheme（）；
const iconColor=color（theme.colors.text）
.alpha（0.54）
.rgb（）
.string（）；
const contentColor=color（theme.colors.text）
.alpha（0.8）
.rgb（）
.string（）；
const imageBorderColor=color（theme.colors.text）
.alpha（0.15）
.rgb（）
.string（）；
返回(
props.onPress（props.id）}>
{props.title}
{'\u2B24'}
{props.overview}
{props.vote_average}
{props.popularity}
{props.release_date}
);
};
const styles=StyleSheet.create({
容器：{
flexDirection:'行'，
paddingTop:15，
paddingRight:15，
},
左列：{
宽度：100，
对齐项目：“居中”，
填充：10
},
右栏：{
弹性：1，
},
顶行：{
flexDirection:'行'，
对齐项目：“基线”，
},
处理：{
marginRight:3，
},
dot:{
字体大小：3，
},
图片：{
borderWidth:StyleSheet.hairlineWidth，
玛金托普：10，
边界半径：20，
宽度：“100%”，
身高：150，
},
最底层：{
填充垂直：10，
flexDirection:'行'，
对齐项目：“居中”，
justifyContent:'之间的空间'，
},
iconContainer：{
flexDirection:'行'，
对齐项目：“居中”，
},
i说明：{
边缘左：2，
线高：20，
尺寸：15
},
电影：{
宽度：“100%”，
身高：100，
}
});
你真的很接近。问题在于
axios.get（）export const Feed = async(props: Props) => {
const theme = useTheme();
var response = await axios.get('https://api.themoviedb.org/3/movie/popular?api_key=49f0f29739e21ecda580cd926a19075e&language=en-US&page=1');
// rest of your code...
asyncwait另一种选择是使用
然后的旧方法，但这会降低代码的可读性 我不确定我是否理解这个问题。为什么需要setState（）
内置feed.tsx
？您所说的“将twitts var设置为axios响应”是什么意思？对不起，我不清楚您想做什么…您的意思是不从/data
导入twitts
，而是要使用API响应？所以你会在这个回答中做你的映射，对吗？通常，一个常见的错误是从Axios获得响应并尝试循环承诺，而不是等待API调用解决。你有没有尝试过任何东西（你有没有关于Axios调用的代码？）或者只是一般性地问一下？是的，我想使用./data的API istead。但是，我使用了console.log（response.data）。