Redux с асин c компонентами в React Native - PullRequest
Новая
       76

Redux с асин c компонентами в React Native

0 голосов
/ 30 апреля 2020

Я в настоящее время разрабатываю мобильное приложение React Native.

Я хочу показать данные из базы данных в FlatList, но до сих пор возникли две проблемы:

  1. I невозможно mapStateToProps, если данные еще не получены
  2. Компонент FlatList выдает ошибку при загрузке, если данные еще не показаны

Я пытался создайте загрузочную подпорку, которая будет отправлена ​​равной true, как только компонент монтируется, и «разблокирует» функции, требующие данных; однако это не сработало до сих пор. 

import React, { Component } from "react";
import { View, Text, Button, FlatList } from "react-native";
import { connect } from "react-redux";

import { Spinner } from "../../common";
import { booksFetch } from "../../actions/BookshelfActions";

class BookshelfList extends Component {
  componentDidMount() {
    this.props.booksFetch(); // Gets the data from the website
  }

  addBookScreen = () => {
    this.props.navigation.navigate("bookshelfadd");
  };

  renderRow(book) {
    return (
      <View>
        <Text>{book.book_name}</Text>
      </View>
    );
  }
  renderList() {
    if (this.props.loading) {
      console.log("loading");
      return <Spinner />;
    }
    return (
      <FlatList // Shows the data on the screen. Will crash if there is no data
        data={this.props.booklist}
        renderItem={() => this.renderRow()}
        keyExtractor={(book) => book.uid}
      />
    );
  }

  render() {
    return (
      <View>
        {this.renderList()}
        <Button onPress={this.addBookScreen} title="Add Book" />
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  if (!this.props.loading) {
    const user_books = _.map(state.bookshelf.booklist, (val, uid) => { // Maps the data to the state. Will crash if there is no data
      return { ...val, uid };
    });
  }

  return {
    booklist: user_books || null,
    loading: state.bookshelf.loading,
  };
};

export default connect(mapStateToProps, { booksFetch })(BookshelfList);```

1 Ответ

1 голос
/ 30 апреля 2020

Вы можете (и должны) использовать все по умолчанию для пустых массивов, когда данные равны нулю (если вы ожидаете получить массив): 

_.map(state.bookshelf?.booklist || [], (val, uid) => ...)

Примечание. ? доступно только в зависимости от версия компилятора babel. Если вы используете последнюю версию React Native, она должна работать. Если нет, вам придется выполнить еще несколько проверок, таких как state.bookshelf && state.bookshelft.booklist || []. 

<FlatList
  data={this.props.booklist || []}
  ...
/>

. Вы должны всегда указывать значение по умолчанию или выполнять условную визуализацию, если получаемые данные могут быть null. * 1011. *

...