不能将没有yoganode的孩子添加到父母那里

时间:2018-03-06 12:07:13

标签: javascript react-native

我收到了一个错误,我搜索了几个小时,但我发现的唯一一件事就是代码中可能存在语法错误,但即使经过大量搜索,我也找不到任何错误。我没有那种经验丰富的编码刚开始学习反应原生,所以你可以建议或指出的任何东西都会非常有用。我在下面发布我的代码。我得到的错误是:

  

无法在没有测量功能的情况下将没有yoganode的孩子添加到父级中!(尝试将'ReactRawTextShadowNode'添加到'LayoutShadowNode')

反应原生版本:0.52.0

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

class Dashboard extends React.Component {

constructor() {
    super();
    this.state = { list: [1, 2, 3, 4, 5, 6, 7, 8, 9] };
}

componentDidMount() {
    let listmount = this.state.list.map((listing => {
        return (
            console.log(listing.listmount, 'ls list'),
            <View key={listing.listmount}><Text style={{ color: 'black' }}>{listing.listmount}</Text></View>
        );
    }));
    this.setState({ list: listmount });
    console.log(listmount, 'showing list');
}

render() {
    return (
        <View style={{ borderWidth: 3, borderColor: 'red' }}>
            <View style={styles.dashboard}>{this.state.list}</View>
        </View>
    );
}}

const styles = { dashboard: { flexWrap: 'wrap', height: '100%', width: '100%', flexDirection: 'row', justifyContent: 'flex-start' }, itemViewStyle: { padding: 10, flex: 1, margin: 10, flexBasis: '40%', borderWidth: 1, borderColor: 'blue', } };

export default Dashboard;

3 个答案:

答案 0 :(得分:1)

class Dashboard extends React.Component {
state = { list: [1, 2, 3, 4, 5, 6, 7, 8, 9] };

listRenderer() {
   return this.state.list.map(listing =>
        <View key={'view ' + listing}>
            <Text key={'text ' + listing } style={{ color: 'black' }}>
                {listing}
            </Text>
        </View>
    );
}

render() {
    return (
        <View style={{ borderWidth: 3, borderColor: 'red' }}>
            <View style={styles.dashboard}>{this.listRenderer()}</View>
        </View>
    );
}}

这对我有用,只是试图返回主要的地图功能,一些代码排序为我完成了这项工作。希望这有助于某人。

答案 1 :(得分:0)

您无法使用<View>显示列表,但应附上<Text>

<View style={{ borderWidth: 3, borderColor: 'red' }}>
        <Text style={styles.dashboard}>{this.state.list}</Text>
</View>

答案 2 :(得分:0)

如果要单独构建列表,则应创建一个返回列表的方法,该方法在组件的 render 方法中调用。对于这个组件,更好的方法可能是:

false