react-native - 无法管理状态数组
问题描述
我想从 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,
}
});
当我尝试运行该应用程序时,会出现警告:警告:列表中的每个孩子都应该有一个唯一的“关键”道具。
解决方案
在执行 for 循环的渲染函数中,在每个视图中添加一个 key prop:
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
推荐阅读
- python - 与 MongoDB 搜索相比,在巨大的列表中搜索非常慢
- python - Python Beautifulsoup 找不到 HTML 数据的文本
- powershell - 必须是一种更清洁的方式
- docker - 无法解析主机:Docker for Mac
- java - 如何停止从 Maven 扩展构建
- api - API 服务如何限制没有密钥的调用?
- javascript - 在 .submit() 和 fetch(method: 'POST') 之后使用 GET 请求刷新页面
- flutter - 获得未来
来自 RangeSlider 中的异步函数 - css - 你如何让引导列连续滚动而不是换行
- filepond - Filepond 预览 Excel 上传