Javascript Android上的应用程序崩溃（本机反应）

我的应用程序在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)

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

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;

从“React”导入React；
从“react native”导入{视图、文本、图像}；
从“./卡”导入卡；
从“/CardSection”导入CardSection；
常量AlbumDetails=（{album}）=>{
//破坏我们的道具
const{title，艺术家，缩略图图像，图像}=相册；
const{thumbnailStyle，headerContentStyles，thumbnailContainerStyle}=styles；
返回(
{title}
{艺术家}
);
}
常量样式={
headerContentStyles：{
flexDirection:'列'，
为内容辩护：“周围的空间”
},
缩略图样式：{
身高：50，
宽度：50
},
thumbnailContainerStyle：{
辩护内容：'中心'，
对齐项目：'中心'，
marginLeft:'10'，
marginRight:“10”
}
}
导出默认的相册详细信息；

2.专辑列表

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;

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
从“axios”导入axios；
从“/AlbumDetail”导入AlbumDetail；
类列表扩展组件{
状态={相册：[]}；
组件willmount（）{
//console.log（'组件将在2..中装载'）
axios.get（）https://rallycoding.herokuapp.com/api/music_albums')
.then（response=>this.setState（{albums:response.data}））；
}
renderAlbums（）{
返回此.state.albums.map（album=>
);
}
render（）{
//console.log（this.state）；
返回(
{this.renderAlbums（）}
);
}
}
导出默认列表；

更改您的

renderAlbums

功能以包括键

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

---

看起来你的AlbumDetails组件中的第二个图像标签关闭了两次：source={{uri:Image}}/>谢谢，我更正了它，但仍然崩溃了…忽略我的最后一条评论…deletedman仍然卡住了，我已经花了两天时间不知道这个错误。你能给

添加

键吗。每个孩子都必须是唯一的。它仍然是Crassesi更新了我的答案并测试了它现在使用的代码me@huxaiphaerIdris如果不适用于您，请包括您的卡和卡片部分文件