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.专辑列表

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'
}