Cannot add a child node that doesn't have a YogaNode to a parent without measure function

问题

Click here for an image of the screenshot

Trying to create a log-in form which reads information from a firebase database through axios; getting an error related to YogaNodes. Read about this; I think there must be something wrong with the JSX syntax. But both SublimeLinter (the text editor I use) and I can't seem to figure out what's wrong.

Pretty sure the components imported (Card, CardSection, Button, Spinner) are fine since those are reusable components I have been using with my other Apps.

import React, { Component } from 'react';
import { View } from 'react-native';
import axios from 'axios';
import firebase from 'firebase';
import { Header, Button, Spinner, CardSection, AlbumDetail } from './components/common';
import LoginForm from './components/LoginForm';

class App extends Component {
    state = { loggedIn: null, albums: [] };

 componentWillMount() {
 firebase.initializeApp({
 apiKey: 'xx',
 authDomain: 'xx',
 databaseURL: 'xx',
 projectId: 'xx',
 storageBucket: 'xx',
 messagingSenderId: 'xx'
});

    axios.get('https://xx')
            .then(response => this.setState({ albums: response.data }));

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ loggedIn: true });
      } else {
        this.setState({ loggedIn: false });
      }
    });
  }

  renderAlbums() {
        return this.state.albums.map(album => 
            <AlbumDetail key={album.District} album={album} />);
    }

  renderContent() {
    switch (this.state.loggedIn) {
      case true:
        return (
        <CardSection>
          <Button onPress={() => firebase.auth().signOut()}>
            Log Out
          </Button>
        </CardSection>  
        );
      case false:
        return <LoginForm />;
      default:
        return <Spinner size='large' />;
    }
  }

  render() {
    return (
      <View>
        <Header headerText='Authentication' />
        console.log(this.state.albums)
        {this.renderContent()}
      </View>
    );
  }
}

export default App;

Any help would be appreciated.

回答1:

I believe you need to add a <Text> tag around Text inside of <Button>, or you can throw the text in the title attribute.

        <CardSection>
          <Button onPress={() => firebase.auth().signOut()}>
            <Text>Log Out</Text>
          </Button>
        </CardSection>

回答2:

Copied from GitHub (https://github.com/facebook/react-native/issues/13243#issuecomment-335488473):

I got this error in RN 0.49.1 in some conditional JSX that relied on a value's being truthy to decide whether a View shows up or not. I fixed the error using the classic double exclamation !!, i.e. "{!!value" instead of "{value."

It helps me

标签

javascript

android

react-native