Android上的应用程序崩溃（React-Native）

Question

我的应用程序在Android中崩溃

我看到我的所有代码的方式已设置。

问题的原因是什么？

我到处检查，但我看到我的代码没有问题。

请问我在哪里错了？

下面是我的控制台错误：

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) 

下面是我的脚本，错误的是：

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

改变你renderAlbums功能，包括关键的

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

也marginLeft & marginRight值是数字而不是字符串

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