无法将没有 YogaNode 的子节点添加到没有测量功能的父节点答案

【问题标题】：Cannot add a child node that doesn't have a YogaNode to a parent without measure function无法将没有 YogaNode 的子节点添加到没有测量功能的父节点
【发布时间】：2018-06-29 19:13:07
【问题描述】：

Click here for an image of the screenshot

尝试创建一个登录表单，通过 axios 从 firebase 数据库读取信息；收到与 YogaNodes 相关的错误。阅读此内容；我认为 JSX 语法一定有问题。但是 SublimeLinter（我使用的文本编辑器）和我似乎都无法弄清楚出了什么问题。

很确定导入的组件（Card、CardSection、Button、Spinner）没问题，因为这些是我在其他应用程序中使用的可重用组件。

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;

任何帮助将不胜感激。

【问题讨论】：

错误说明了什么？请粘贴错误
@Ali 我无法直接添加图像。附上一个链接。
@KarthigeyanKalyan 是否有 axios 和 firebase 请求超出生命周期方法（例如 componentDidMount）的原因？
没有具体原因，@JoshuaLeonard。只是想把所有的进口放在一起；无论如何，认为在应用程序的整个运行时进行导入不会有什么坏处
我在github.com/HandlebarLabs/currency-converter-starter/blob/…遇到了同样的问题

标签： javascript android react-native

【解决方案1】：

从 GitHub (https://github.com/facebook/react-native/issues/13243#issuecomment-335488473) 复制：

我在 RN 0.49.1 中在一些依赖于价值是真实的，以决定视图是否出现。我解决了错误使用经典的双感叹号!!，即“{!!value” 而不是“{值”。

对我有帮助

【讨论】：

【解决方案2】：

我认为您需要在<Button> 内的Text 周围添加一个<Text> 标签，或者您可以将文本扔到title 属性中。

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

【讨论】：

我将“注销”文本作为子项传递给道具，并将其嵌入到

【解决方案3】：

我认为你应该在这个方法中删除console.log(...)

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

你可以这样做：

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

        {this.renderContent()}
      </View>
    );   
}

Button 也不能接受文本，您应该将其包装在 <Text> 这样的组件中

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

【讨论】：

正如我上面解释的那样，文本作为子项传递给道具。所以错误在我想的其他地方。还有其他想法吗？对 console.log 的更改也没有什么不同。