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;
任何帮助都将不胜感激。
答案 0 :(得分:2)
从GitHub(https://github.com/facebook/react-native/issues/13243#issuecomment-335488473)复制:
我在一些依赖于a的条件JSX中在RN 0.49.1中出现了这个错误 值是否真实,以决定视图是否显示。我解决了 使用经典双重感叹号的错误!!,即“{!! value” 而不是“{value。”
它帮助我
答案 1 :(得分:1)
我认为您需要在<Text>
内的文本周围添加<Button>
标记,或者您可以将文本放在title属性中。
<CardSection>
<Button onPress={() => firebase.auth().signOut()}>
<Text>Log Out</Text>
</Button>
</CardSection>
答案 2 :(得分:0)
我认为您应该删除此方法中的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>