Crashs d'applications (React-Native) sur Android

Question

Mon application se bloque sous Android

La façon dont je vois tout mon code est défini.

Quelle est la cause du problème ?

J'ai vérifié partout mais je ne vois aucun problème dans mon code.

S'il vous plaît, où ai-je tort ?

Voici mon erreur de console :

Running application "CatalogueApp" with appParams: {"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
Debugger and device times have drifted by more than 60s. Please correct this by running adb shell "date `date +%m%d%H%M%Y.%S`" on your debugger machine.
Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of `AlbumList`. -keys for more information.
    in AlbumDetails (at AlbumList.js:19)
    in AlbumList (at index.android.js:22)
    in RCTView (at View.js:113)
    in View (at index.android.js:20)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:100)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:121)
    in AppContainer (at renderApplication.js:34)

Voici mes scripts Où se trouve l'erreur :

1.AlbumDetail.js.

import React from 'react';
import {View, Text, Image} from 'react-native';
import Card from './Card';
import CardSection from "./CardSection";

const AlbumDetails = ({album}) => {
    //destructuring our props
    const {title,artist,thumbnail_image,image} = album;
    const {thumbnailStyle,headerContentStyles,thumbnailContainerStyle} = styles;

    return (

        <Card>
            <CardSection>
                <View style={thumbnailContainerStyle}>
                    <Image  style={thumbnailStyle} source={{uri : thumbnail_image}}/>
                </View>
                <View style={headerContentStyles}>
                    <Text>{title}</Text>
                    <Text>{artist}</Text>
                </View>
            </CardSection>
            <CardSection>
                   <Image source={{uri :image}}/>
            </CardSection>

        </Card>
    );

}

const styles = {
    headerContentStyles: {
        flexDirection: 'column',
        justifyContent: 'space-around'

    },
    thumbnailStyle:{
        height:50,
        width:50
    },
    thumbnailContainerStyle:{
        justifyContent:'center',
        alignItems:'center',
        marginLeft:'10',
        marginRight:'10'

    }
}

export default AlbumDetails;

2.AlbumList

import React,{Component} from 'react';
import {View, Text} from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail';

class AlbumList  extends Component {

    state ={albums:[]};

    componentWillMount(){
       // console.log('Component will mount in 2 ..')
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(response => this.setState({ albums: response.data}));
    }

    renderAlbums(){
        return this.state.albums.map(album =>
            <AlbumDetail  album={album}/>
        );
    }
       render(){

        //console.log(this.state);
    return (
        <View>
            {this.renderAlbums()}

        </View>
    );
}
}

export default AlbumList;

Answer 1

Modifier votre renderAlbums pour inclure la clé

renderAlbums(){
    return this.state.albums.map((album, index) => 
        <AlbumDetail key={index}  album={album} />
    );
}

De plus, les valeurs marginLeft et marginRight sont des nombres et non des chaînes de caractères.

thumbnailContainerStyle:{
    justifyContent:'center',
    alignItems:'center',
    marginLeft: 10, // instead of '10'
    marginRight: 10, // instead of '10'
}