Не удается правильно добавить данные в состояние массива - PullRequest
Новая
       19

Не удается правильно добавить данные в состояние массива

0 голосов
/ 26 июня 2019

Я пытаюсь получить данные из этого API https://apigrad.herokuapp.com/people и поместите имя каждой строки в имя массива [], затем я хочу получить доступ к каждому имени внутри компонента с именем «User», его переменной с именем name.

Это код пользовательского компонента 

class User extends React.Component {
  render() {
    const { name, avatar} = this.props;
    const userDetails = (
        <View style={styles.container}>
          <Image style={styles.img} source={{uri: avatar}}/>
          <Text>Name: {name} </Text>
        </View>
    );
    return (
      <Card>
      {userDetails}
      </Card>
    );
  }
}

и это основной код 

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 key={i}>
          <User name={this.state.name[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({
        name: [...this.state.name,names]
        }
      );
    } 
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  }
});

Ожидаемый пользователь будет иметь компонент пользователя с именем каждой строки в API но эта ошибка появляется Нарушение инварианта: нарушение инварианта: текстовая строка должна отображаться внутри компонента.

1 Ответ

0 голосов
/ 26 июня 2019

Похоже, внутри вас слишком много скобок для цикла, измените: 

 for(let i=0; i<1; i++){
  userCard.push(
    <View key={i}>
      <User name={this.state.name[i]}/>
    ))}
    </View>
  )
}

до: 

 for(let i=0; i<1; i++){
  userCard.push(
    <View key={i}>
      <User name={this.state.name[i]}/>
    </View>
  )
}
...