无法管理状态数组答案

【问题标题】：Can't manage state arrays无法管理状态数组
【发布时间】：2019-06-26 16:32:50
【问题描述】：

我想从 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,
   }
 });

当我尝试运行应用程序时，会出现警告：警告：列表中的每个孩子都应该有一个唯一的“key”道具。

【问题讨论】：

标签： react-native axios state

【解决方案1】：

在执行 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

【讨论】：

不变违规：不变违规：文本字符串必须在组件中呈现。出现此错误是因为 name 不是字符串数组，您知道这是为什么吗？
我的解决方案有没有给你这个错误？我可以看看代码吗？
这是组件 User class User extends React.Component { render() { const { name, avatar} = this.props; const userDetails = ( Name: {name} );返回（ {userDetails} ）； } }
嘿，我看到你用这个问题创建了另一个问题，如果我帮助你解决了你的问题，请接受我的回答
您的回答已经帮助我解决了第一个问题。非常感谢。