我想从API获取JSON数据,但我不知道该数据的大小。 数据就像一个“由名称和图片组成”的历史。 变量名称和头像存在错误。
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from '../components/MenuButton';
import User from '../components/User';
import API from '../Utils/API';
export default class SettingScreen extends React.Component {
constructor(props){
super(props);
this.state={
name: [],
avatar:[]
};
}
render() {
var userCard=[];
for(let i=0; i<3; i++){
userCard.push(
<View>
<User name={this.state.name[i]} avatar={this.state.avatar[i]}/>
</View>
)}
return (
<View style={styles.container}>
<MenuButton navigation={this.props.navigation}/>
{userCard}
</View>
);
}
async componentDidMount() {
// Load async data.
let userData = await API.get('/', {
params: {
results: 1,
inc: 'name,avatar'
}
});
// Parse the results for ease of use.
for(let i=0; i<userData.length; i++){
const Data = userData.data[i];
const names = Data.name;
const base64Icon=Data.image;
const base64Icons=base64Icon.slice(2,-1);
const avatar = 'data:image/jpg;base64,'+base64Icons;
this.setState(state=>{
const name=state.name.push(names);
return{
name,
avatar,
}
});
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 30,
}
});
当我尝试运行该应用程序时,出现警告: 警告:列表中的每个孩子都应该有一个唯一的“关键”道具。
答案 0 :(得分:0)
在render函数中,您可以在其中进行for循环,在每个视图中添加一个关键道具:
for(let i=0; i<3; i++){
userCard.push(
<View key={i}>
<User name={this.state.name[i]} avatar={this.state.avatar[i]}/>
</View>
)}
您需要在键中放入一个唯一值。如果您有该用户卡的ID,请使用该ID代替i