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

Question

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

不能将没有

瑜伽节点的孩子添加到没有测量功能的父母中！(尝试将"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;

Answer 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>
    );
}}

好吧，这对我有用，只是尝试返回主地图函数，一些代码排序为我完成了这项工作。希望这对某人有所帮助。

Answer 2

不能显示带有<View>的列表，它应该用<Text>

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

Answer 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>
    );
}}