时间戳

首页 > 解决方案 > 使用 this.state.array.map 的 React-native 重新加载应用程序空白屏幕

react-native - 使用 this.state.array.map 的 React-native 重新加载应用程序空白屏幕

问题描述

export default class App extends React.Component {
  constructor() {
    super();
    this.itemRef = firebaseApp.database().ref();
    this.state = {
      myArray: [],
    };
  }

  componentDidMount() {
    //get database from firebase
    //................
    this.setState({
      // load database into myArray
      // Example:
      //myArray: myDatabaseFirebase
    })
  }

  render() {
    return (
      <ViewPager>
        {this.state.myArray.map(item => {
          return (
            <Text>Something from database </Text>
          )
        })}
      </ViewPager>
    );
  }
}

当我运行应用程序时它显示空白屏幕，我认为 myArray 没有加载数据库，因此它为空并且应用程序显示空白屏幕。我该如何解决这个问题？

标签： react-native

解决方案

在第一次渲染时，UI 会被加载，并且由于 firebase 数据的异步性质，加载需要时间，因此您需要检查 myArray 中的数据是否可用。由于您最初将 myArray 定义为空所以我们可以直接检查长度。只需添加条件

return (
  <ViewPager>
    {this.state.myArray.length > 0 && this.state.myArray.map(item => {
      return (
        <Text>Something from database </Text>
      )          
    })}
  </ViewPager>
);

推荐阅读