如何修复，错误是“不变违规：文本字符串必须在 <Text> 组件中呈现。”

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 会显示在屏幕上。

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

我正在尝试处理图表，我也尝试过地图，但没有奏效。

React Native 支持地图吗？

Answer 1

请注意，try1 组件上的 this.a 属性是一个数组：this.a = [];，并且您正尝试在您的 render() 方法中直接显示此属性，如下所示：<Text>{this.a}</Text>。但是，这会导致以下问题：

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

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

更多信息请查看render()spec。

此代码中还有其他错误：

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

考虑到这些要点，尝试循环遍历 this.a 并为数组中的每个元素指定一个要显示的 Text 元素，如下所示：

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

    )  
}

希望对您有所帮助！

Answer 2

您不能将函数作为返回值传递，它会将其解释为字符串值，而 View 无法呈现文本。

您可以使用生命周期方法来执行此功能。

Answer 3

您正试图在<Text></Text> 组件内呈现一个数组。只能渲染纯字符串。

如果您想在组件内显示动态文本，请使用“状态”。这可能会对您有所帮助：

constructor(props){
 super(props);
 ...
 ...
 this.state = {
  a = []
 }
}

然后：

render() {

 this.config();

 return(
    <View style={styles.container}>
        this.state.a && this.state.a.map(data=> (
           <Text>{data}</Text>
        ));
    </View>

 )  
}

Answer 4

this.config() 是你在 jsx 中编写的函数。 如果要调用配置函数，则必须在 jsx 之外编写。 this.config() 作为回报，将其视为字符串。每个字符串都必须在 Text 标签内。所以你会看到这个错误。

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

Answer 5

如果您使用一些条件语句，请使用三元运算符。如果您使用 && 并在此之后传递一个组件，那么它将通过您一个错误。请参阅下面什么是我的代码。这是 Feed 是我的组件：

之前

{userId && <Feed posts = {posts}/> } // this will give you an error

之后

{userId ? <Feed posts = {posts}/> : null} // this works fine

所以也许你的代码有这样的问题。现在就来看看吧。