web-dev-qa-db-ger.com

Native Reaktion: Ein Kind, das keinen YogaNode oder einen übergeordneten Knoten hat, kann nicht hinzugefügt werden

Ich habe gerade angefangen zu reagieren,

Ich habe eine separate Datei flexdemo.js erstellt und eine Komponente wie folgt erstellt:

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

export default class FlexibleViews extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, backgroundColor: "powderblue" }}> </View>
                <View style={{ flex: 2, backgroundColor: "skyblue" }}> </View>
                <View style={{ flex: 3, backgroundColor: "steelblue" }}> </View>
            </View>

        );
    }
}

und App.js-Datei ist wie folgt:

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

// import Bananas from './src/banana';
// import LotsOfStyles from './src/styledemo'

import FlexibleViews from './src/flexdemo';

export default class App extends Component {
  render() {
    return (
      // <Bananas name = "Tapan"/>
      <View>
        <FlexibleViews />
      </View>

    );
  }
}

Das gibt mir diesen Fehler:

 enter image description here

Wenn ich jetzt versuche, den Code durch Hinzufügen von flexdemo.js-Code in App.js auszuführen, funktioniert alles gut.

Die App.js wie folgt geändert:

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

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

 enter image description here

26
TapanHP

Entfernen Sie Kommentare innerhalb der Komponente.

36
Roshan Salian

Ich möchte hier eine allgemeinere Antwort geben, weil es mehrere Gründe dafür geben kann, dass das Problem dieselbe Fehlermeldung zurückgibt. Die drei habe ich am meisten gesehen:

1. Kommentare könnten die Ursache sein. Statt jedoch die Kommentare make .__ zu entfernen. sie arbeiten:

Im return()- Teil müssen Variablen in {} wie .__ eingepackt werden. {this.state.foo} so das Einwickeln der Kommentare funktioniert gut ... 

    return(
        <Text> This works {/* it really does */}</Text>
    );

... solange sie nicht das erste oder letzte Element in der return-Anweisung sind:

    return(
      {/* This fails */}
      <Text> because the comment is in the beginning or end </Text>
      {/* This also fails */}
    );

2. Bedingtes Rendering kann die Ursache sein. Wenn myCheck nicht definiert ist oder Eine leere Zeichenfolge kann fehlschlagen:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {myCheck && <MyComponent />}
    );

aber doppelte Negation hinzufügen !! works: 

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {!!myCheck && <MyComponent />}
    );

3. Whitespaces (oder tatsächlich irgendwelche Zeichenfolgen) innerhalb, das eine Komponente .__ verursachen kann. wenn nicht in einer <Text>- Komponente:

Text in einer Ansicht zum Beispiel:

    /* This fails */
    return(
      <View>it really does</View>
    );

Aber auch der winzige Abstand zwischen zwei Komponenten:

    /* <View>*Space*<Text> fails: */
    return(
      <View> <Text>it really does</Text> </View>
    );

Funktioniert jedoch in einer Newline:

    return(
      <View>
        {/* This works */}
        <Text>surpisingly it does</Text>
      </View>
    );

Leider führen diese Fallstricke nicht immer zu Fehlern. Manchmal arbeiten sie. Ich denke, das hängt davon ab, welche der vielen Tools/Lybraries/Komponenten Sie verwenden und welche Versionen Sie in Ihrer App verwenden. 

31
Pauloco

Ich konnte das Problem mit dem von Ihnen bereitgestellten Code reproduzieren. Die Lösung ist zweifach:

  1. Entfernen Sie in Ihrer flexdemo.js-Datei die Whitespaces aus den <View>-Tags. Sie werden als Text betrachtet und Text ist nur innerhalb einer <Text>-Komponente zulässig. Ich empfehle Ihnen, Ihre <View>-Tags so lange selbst zu schließen, bis sie einen Inhalt haben, um sich künftig von diesem Problem zu entfernen:

    import React, { Component } from 'react';
    import { View } from 'react-native';
    
    export default class FlexibleViews extends Component {
      render() {
        return (
          <View style={{ flex: 1 }}>
            <View style={{ flex: 1, backgroundColor: 'powderblue' }} />
            <View style={{ flex: 2, backgroundColor: 'skyblue' }} />
            <View style={{ flex: 3, backgroundColor: 'steelblue' }} />
          </View>
        );
      }
    }
    

    Dadurch werden Ihre Komponenten gerendert, sind aber immer noch fehlerhaft, da auf dem Bildschirm nichts angezeigt wird.

  2. Damit Ihre flexiblen Blautöne angezeigt werden, müssen Sie entweder die <View>-Komponente in Ihrer App.js-Datei flex hinzufügen oder (abhängig von Ihren nächsten Schritten, ich denke,) es entfernen und Ihren <FlexibleViews> als Stammkomponente darstellen , da es bei einigen Kindern sowieso eine <View>-Komponente ist.

10

Wenn Sie if else-Anweisung in Ihrer render()-Funktion haben, verwenden Sie!!wie folgt:

{!! (this.state.your_state) &&
   <View>
        <Text>Your Text</Text>
   </View>
}

anstatt:

{(this.state.your_state) &&
    <View>
         <Text>Your Text</Text>
    </View>
}

Ich reagiere auf die native Version des Downgrades, dann bekam ich einen anderen Fehler. Im Grunde hatte ich eine einfache Zeichenfolge in einer Ansicht.

<View>
    MyComponent
</View>

Ich musste die Zeichenfolge mit einer Textkomponente wie folgt umschließen:

<View>
    <Text>MyComponent</Text>
</View>

hoffentlich hilft das

2
jack.the.ripper

In meinem Fall hatte ich kleine () Klammern um eine meiner Ansichten, die Fehler verursachten.

({renderProgress()})

Das Entfernen kleiner Klammern hat bei mir funktioniert.

{renderProgress()}

1
Adnan

Löschen Sie den Kommentar im Rückgabeblock "//" Das gleiche Problem trat auf, wenn ich versehentlich ein ";" Im Rücklaufblock funktioniert das iOS gut, aber das Android hat diese Fehlerinformationen

1
yubinvip

Dieser Fehler ist in der Regel einer der folgenden Fehler

  • Entfernen Sie unnötige Kommentare und entfernen Sie Kommentare aus der Rückgabefunktion.
  • Überprüfen Sie den richtigen Variablennamen.
  • Überprüfen Sie, ob ein unbeabsichtigtes Semikolon oder eine falsche Syntax vorliegt 
1
Rohith M

Entfernen Sie das Semikolon, wenn Sie eine Methode in rendern 

<View style={styles.container}> {this.renderInitialView()} //semi-color should not be here </View>

0

Dieser Fehler tritt auch auf, wenn Sie Kommentare in Ihrer Funktion render () return () haben. Entfernen Sie alle Kommentare in Ihrer Return-Funktion, wenn Sie JSX rendern

0
Nickmccomb

In meinem Fall hatte ich eine Bedingung in meiner Renderfunktion, die zur Bewertung von 0 führte.

Es scheint, dass 0 && 'einige jsx' in neueren Versionen von React native bricht. 

Fehlerbeispiel:

render(){
   return <View>
              {this.state.someArray.length && <View>...</View>}
      </View>
}

Obwohl dies gültiges Javascript sein sollte und funktionieren muss, da 0 falsey ist, stürzt es in native native ab, nicht sicher warum, aber es funktioniert mit ein wenig Refactoring wie

Arbeitsbeispiel:

render(){
   return <View>
              {this.state.someArray && this.state.someArray.length> 0 && 
              <View>...</View>}
          </View>
}
0
TacoEater

Ich bin auf das gleiche Problem gestoßen und habe dieses Problem gelöst, indem ich die Kommentare, die ich während der Bearbeitung des Projekts in Android Studio gemacht habe, entfernt habe. Dort fügt der Shorotcut des Kommentars/* und */hinzu, aber eigentlich sollte der kommentierte Code eingeschlossen werden mit dem Beginn und dem Ende von geschweiften Klammern wäre zum Beispiel folgendes ein ungültiger Kommentar:

/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/

Und das Folgende wird gültig sein:

{/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/}

sie sehen, es gibt nur einen kleinen Unterschied, wenn Sie den Kommentar in geschweifte Klammern einschließen. 

0
Khan Shahrukh