javascript - 如何解决，错误是 "Invariant Violation: Text strings must be rendered within a component."

Question

我正在尝试让 config() 运行，但它以某种方式失败了。

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

export default class try1 extends Component {

  constructor(noofVertices){
    super();
    this.noofVertices = this.noofVertices
    this.edge = {}
this.a = [];}


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' ];

    // adding vertices
    for (var i = 0; i < vertices.length; i++) {
      this.addVertex(vertices[i]);
    }

    // adding edges
    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)


 {

            for(var adj in this.edge[vertex])
                this.a.push(this.edge[vertex][adj])
        this.a.sort()


           //this.updateEdge1('App0');   
        }




render(){

  return (
    <View style={styles.container}>

      this.config()
      <Text>{this.a}</Text>

    </View>
  );
}
}

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

}
);

我期待 11111 显示在屏幕上。

它显示错误“不变违规:文本字符串必须在组件内呈现。”

我正在尝试处理图表，我也尝试过 map ，但没有用。

react native 支持 map 吗？

Answer 1

注意你的 this.a您的属性(property)try1组件是一个数组:this.a = [];并且您正在尝试直接在 render() 中显示此属性像这样的方法:<Text>{this.a}</Text> .但是，这会导致问题，因为:

render()方法不支持直接呈现数组的返回类型。当您调用 React组件的 render()方法它必须返回以下之一:

1. react 元素。通常通过 JSX 创建。例如，<div />和 <MyComponent />是指示 React 分别呈现 DOM 节点或另一个用户定义组件的 React 元素。
2. 数组和片段。让您从渲染中返回多个元素。有关详细信息，请参阅有关片段的文档。
3. 门户网站。让您将 child 渲染到不同的 DOM 子树中。有关详细信息，请参阅门户文档。
4. 字符串和数字。它们在 DOM 中呈现为文本节点。 bool 值或空值。什么都不渲染。 (主要用于支持返回测试 && <Child /> 模式，其中测试是 bool 值。)

有关更多信息，请查看 render() spec .

此代码中还有其他错误:

1. 自定义 React 组件必须以大写字母命名 否则 JSX 会认为这是一个 HTML 标签。重命名 try1至 Try1 .
2. 将您的配置函数调用移到 return 之前语句作为返回语句期望返回实际 View 本身。

考虑到这些要点，尝试遍历 this.a并给数组中的每个元素一个 Text要显示的元素，如下所示:

render() {
    this.config();
    let aEles = this.a;
    return(
        <View style={styles.container}>
            aEles.map(edge => (
               <Text>{edge}</Text>
            ));
        </View>

    )  
}

希望对您有所帮助!