无法将没有瑜伽节点的孩子添加到父母答案

【问题标题】：cannot add a child that doesn't have a yoganode to a parent无法将没有瑜伽节点的孩子添加到父母
【发布时间】：2018-03-06 12:07:12
【问题描述】：

我遇到了一个错误，我在上面搜索了几个小时，但我发现的唯一一件事是代码中可能存在语法错误，但即使经过大量搜索，我也找不到任何错误。我在编码方面没有那么有经验，刚开始学习 react-native 所以你可以建议或指出的任何东西都会非常有帮助。我在下面发布我的代码。我得到的错误是：

无法将没有瑜伽节点的子节点添加到没有度量函数的父节点！（尝试将“ReactRawTextShadowNode”添加到“LayoutShadowNode”）

React Native 版本：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;

【问题讨论】：

标签： javascript react-native

【解决方案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>
    );
}}

这对我有用，我只是尝试返回主地图函数，并且对我进行了一些代码排序。希望这对某人有所帮助。

【讨论】：

【解决方案2】：

<View>不能显示列表，必须用<Text>括起来

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

【讨论】：

我尝试了你的答案，但是当我运行代码时，{this.state.list} 被评估为 null。顺便说一句，感谢您的帮助，非常感谢。 :)

【解决方案3】：

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

renderList() {
  return (

  <View style={styles.dashboard}>

  {
   this.state.list.map(
    listing => 
       <View key={listing.listmount}>
          <Text style={{ color: 'black' }}>{listing.listmount}</Text
       </View>
       );
    )
  }
  </View>
}

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

【讨论】：

好吧，我尝试使用 {this.renderList()} 的方式仍然是同样的错误，但不能仅使用 {renderList()} 运行。非常感谢您的帮助，非常感谢。 :)