javascript - React Native 中带有异步组件的 Redux

Question

我目前正在开发一个 React Native 移动应用程序。

我想在 FlatList 中显示数据库中的数据，但到目前为止出现了两个问题:

1. 如果尚未获取数据，我无法 mapStateToProps
2. 由于数据尚未显示，FlatList 组件在加载时会抛出错误

我尝试创建一个加载 Prop ，一旦组件安装，该 Prop 就会被设置为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);```

Answer 1

当数据为空时，您可以(并且应该)将所有内容默认为空数组(如果您希望收到一个数组):

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

注意，? 的可用性仅取决于 babel 编译器的版本。如果您使用的是最新版本的 React Native，它应该可以工作。如果没有，您将必须进行更多检查，例如 state.bookshelf && state.bookshelf.booklist || [].

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

如果您收到的数据可能为 null，您应该始终提供默认值或有条件地呈现。