react-native - 屏幕需要重新渲染以在 React-Native 中显示实时数据
问题描述
我正在使用 componentDidMount 在 React-Native 应用程序中显示 Firebase 实时数据,但是,当我第一次渲染时,没有显示数据。我需要返回并再次导航到页面以更新数据并显示在屏幕上。如何解决此问题并在第一次尝试时显示数据?谢谢你。
export default class ForthPage extends Component {
constructor() {
super();
this.state = {
reservas: []
}
}
componentDidMount() {
const readUsersData = () => {
const nameRef = firebase.database().ref('user0001')
nameRef.on('value', (snapshot) => {
const state = snapshot.val();
this.state.reservas = state; //misstake(see my answer)
});
}
readUsersData()
const pushAdminData = (data) => {
this.setState({ data })
}
pushAdminData(this.state.reservas);
}
render() {
const reservas = JSON.stringify(this.state.reservas);
return (
<Background>
<View>
<ScrollView>
<Text> Mis reservas: {reservas}</Text>
</ScrollView>
</View>
</Background>
)
}
}
解决方案
函数的调用readUsersData()
似乎不清楚。尝试在与 render,componentDidMount 相同的级别定义函数。
像下面
constructor() {
super()
this.state = {
reservas: []
}
}
componentDidMount() {
const readUsersData = ()=> {
const nameRef = firebase.database().ref('user0001')
nameRef.on('value', (snapshot)=> {
const state = snapshot.val()
this.setState({reservas:state}) })
}
readUsersData();
}
这将完成这项工作。
推荐阅读
- sql - RIGHT JOIN 是使用此查询的方式吗?
- azure - 为什么我的 Bing 认知服务请求返回 401?
- cmake - 带有 CMake 的 STM32 项目
- c# - 编译器错误 MT2002:当 IOS 应用程序 (Xamarin) 引用 VB.NET Windows 窗体项目中的类时
- python - Chrome 的源 HTML 与 Internet Explorer 不同?
- ruby-on-rails - 升级到 macOS Mojave 后,如何找到我的 Rails 应用程序在客户端第一次请求(pg.rb 分段错误)后崩溃的来源?
- asp.net-mvc - 为什么引导程序无法在基于 Angular CLI MVC 的项目中正确加载
- c++ - 编译期间未找到 QDialog
- eos - 抵押我账户的 CPU 和/或 NET 带宽的 EOS 账户列表
- python - 如何设置正确的 y 轴范围并命名我的列表