javascript - 无法将没有 YogaNode 的子级添加到没有测量函数的父级

Question

我遇到了这个问题，也许你们中有人遇到过这个问题并知道解决方案？我查看了互联网并检查了我的标签，没有没有标签的文本

Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: ;]' to a 'RCTView')
    addChildAt
        ReactShadowNodeImpl.java:279
    addChildAt
        ReactShadowNodeImpl.java:56
    setChildren
        UIImplementation.java:482
    setChildren
        UIManagerModule.java:441
    invoke
        Method.java
    invoke
        JavaMethodWrapper.java:372
    invoke
        JavaModuleWrapper.java:160
    run
        NativeRunnable.java
    handleCallback
        Handler.java:739
    dispatchMessage
        Handler.java:95
    dispatchMessage
        MessageQueueThreadHandler.java:29
    loop
        Looper.java:148
    run
        MessageQueueThreadImpl.java:192
    run
        Thread.java:818

代码:Albumlist.js 这是显示所有相册

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

class AlbumList extends Component {
    state = {albums: [] } ;

    componentWillMount(){
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then(response => this.setState ({ albums : response.data }));
    }


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

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

export default AlbumList;

AlbumDetail.js 这是一张专辑详细信息卡

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


const AlbumDetail = (props) => {
    return (
        <Card>
            <CardSection>
                <View />
                <View style = {styles.headerContentStyle}>
                    <Text>{props.albums.title}</Text>
                    <Text>{props.albums.artist}</Text>  
                </View>;
            </CardSection>      
        </Card>
    );
};

const styles= {
    headerContentStyle: {
        flexDirection: 'column',
        justifyContent: 'space-around'
    }
};

export default AlbumDetail;

Card.js 这是样式的包装

import React from 'react';
import { View, Platform } from 'react-native';

const Card = (props) => {
    return (
        <View style={styles.containerStyle}>
        {props.children}
        </View>
    );
};

const styles = {
    containerStyle:{
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#ddd',
        borderBottomWidth: 0,
        ...Platform.select ({
            ios: {
                shadowColor: '#000',
                shadowOffset: {width: 0, height : 2},
                shadowOpacity : 0.1, 
                shadowRadius: 2,
            }, 
            android: {
                elevation: 1
            }
        }),
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10
    }



};

export default Card;

CardSection.js 这是一个单一的卡片部分包装器，所以看起来更好

import React from 'react';
import { View } from 'react-native';

const CardSection = (props) => {
    return (
        <View style= {styles.containerStyle}>
            {props.children}
        </View> 
    );
};

const styles = {
    containerStyle: {
        borderBottomWidth:1,
        padding: 5,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        borderColor: '#ddd',
        position: 'relative'
    }
};

export default CardSection;

Answer 1

您的 AlbumDetail Card 中有一个拼写错误，这导致 ; 没有在 Text 标记内渲染，从而导致显示的错误。

<View style = {styles.headerContentStyle}>
     <Text>{props.albums.title}</Text>
     <Text>{props.albums.artist}</Text>  
</View>; // <= here