React Native报错：Text需在<Text>组件内渲染，config()执行失败求助

先帮你拆解问题，一步步解决：

一、搞定"Invariant Violation: Text strings must be rendered within a component"错误 #

你碰到这个报错主要有两个问题：

1. 你在render()的JSX里直接写了this.config()——React Native会把这个方法的返回值（这里是undefined）当成文本节点渲染，但它要求所有文本必须套在<Text>组件里，这就触发了错误。
2. 更关键的是，config()这种初始化图结构的逻辑根本不该放在render()里！render()会在组件更新时反复执行，重复初始化图不仅浪费资源，还会导致数据混乱。

怎么修？ #

• 把config()的调用移到componentDidMount()里，这个生命周期方法只会在组件首次加载完成后跑一次，刚好适合做初始化操作。
• 顺便把构造函数里的bug改了：你原来写的this.noofVertices = this.noofVertices等于没赋值，应该把传入的参数正确赋值给实例属性（如果不需要这个参数也可以直接删掉）。

二、实现显示"11111"的需求 #

现在你的traverse方法会把App1的4个邻接边权重（都是1）放进this.a数组，要是想显示"11111"，要么直接在<Text>里写死这个字符串，要么调整逻辑生成包含5个1的数组。我在修正后的代码里两种方式都给你留了注释，你可以按需选。

三、React Native支持Maps吗？ #

你说的maps如果是指JavaScript原生的Map对象，那完全没问题！React Native的JS运行环境（不管是iOS的JSC/Hermes，还是Android的Hermes）都支持ES6+的所有特性，你可以直接用new Map()来构建键值对结构，和在浏览器里用一模一样。

要是你说的是地图组件，React Native本身没内置，但可以用第三方库（比如react-native-maps）来实现地图功能。

修正后的完整代码 #

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

export default class try1 extends Component { 
  constructor(props) { 
    super(props); 
    // 修正构造函数参数赋值，不需要的话可以直接删掉这行
    this.noofVertices = props.noofVertices || 0; 
    this.edge = {}; 
    // 用state管理要显示的文本，保证数据变化时UI自动更新
    this.state = {
      displayText: ''
    };
  }

  // 组件挂载完成后初始化图结构
  componentDidMount() {
    this.config();
    // 直接设置要显示的"11111"
    this.setState({ displayText: '11111' });
    // 如果你想基于图的遍历结果生成，就用下面这行（当前traverse会得到4个1，要5个的话得调整逻辑）
    // this.setState({ displayText: this.a.join('') });
  }

  addVertex(v){ 
    this.edge[v] = {}; 
  } 

  addEdge(v, w, weight){ 
    if (weight == undefined) { 
      weight = 0; 
    } 
    this.edge[v][w] = weight; 
  } 

  config(){ 
    var vertices = [ 'App0', 'App1', 'App2', 'App3', 'App4' ]; 
    // 添加节点
    for (var i = 0; i < vertices.length; i++) { 
      this.addVertex(vertices[i]); 
    } 
    // 添加边
    this.addEdge('App0', 'App1',1); 
    this.addEdge('App0', 'App2',1); 
    this.addEdge('App0', 'App3',1); 
    this.addEdge('App0', 'App4',1); 
    this.addEdge('App1', 'App0',1); 
    this.addEdge('App1', 'App2',1); 
    this.addEdge('App1', 'App3',1); 
    this.addEdge('App1', 'App4',1); 
    this.addEdge('App2', 'App0',1); 
    this.addEdge('App2', 'App1',1); 
    this.addEdge('App2', 'App3',1); 
    this.addEdge('App2', 'App4',1); 
    this.addEdge('App3', 'App0',1); 
    this.addEdge('App3', 'App1',1); 
    this.addEdge('App3', 'App2',1); 
    this.addEdge('App3', 'App4',1); 
    this.addEdge('App4', 'App0',1); 
    this.addEdge('App4', 'App1',1); 
    this.addEdge('App4', 'App2',1); 
    this.addEdge('App4', 'App3',1); 
    this.traverse('App1'); 
  } 

  traverse(vertex) { 
    this.a = []; // 每次遍历前清空数组，避免重复添加数据
    for(var adj in this.edge[vertex]) {
      this.a.push(this.edge[vertex][adj]);
    } 
    this.a.sort(); 
  } 

  render(){ 
    return ( 
      <View style={styles.container}> 
        <Text>{this.state.displayText}</Text> 
        {/* 要是想显示遍历结果，就打开下面这行注释 */}
        {/* <Text>{this.a ? this.a.join('') : ''}</Text> */}
      </View> 
    ); 
  } 
} 

const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    backgroundColor: 'white', 
    alignItems: 'center', 
    justifyContent: 'center', 
  }, 
});

额外提醒 #

• 用state管理显示文本是React Native的最佳实践，因为state更新时组件会自动重新渲染，保证UI和数据同步。
• 如果你的图结构需要动态修改，建议把edge和a也放到state里（或者用函数组件的useState），而不是存在实例属性中，这样数据变化时UI才能正确更新。

内容的提问来源于stack exchange，提问作者Vipin Katara