react-native - 检索产品列表并显示它们

问题描述

我正在尝试从我的 API 中检索产品列表。目前，什么都没有显示，页面当前是空的，除了我的后退按钮，我不明白为什么。我使用的两个函数都可以正常工作，因为 console.log 都可以工作。你可以帮帮我吗？一切看起来都很好，console.log 在终端中工作，但我无法在应用程序中显示任何内容。

我试过这个小吃：https ://snack.expo.io/O4oPj8-Qz

const Item = ({ item, onPress, style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.productItem, style]}>
    <Text style={[styles.h4, {textAlign: "left"}]}>
    {item.name}
    </Text>
  </TouchableOpacity>
);

export default class Products extends Component {
  constructor(props) {
    super(props);
      this.state = {
        selectedId: '',
        setSelectedId: '',
        listData: '',
        currentPage: 1,
        loadMoreVisible: true,
        loadMoreVisibleAtEnd: false,
        displayArray: null
      }
    };

  initListData = async () => {
    let list = await getProducts(1);
    console.log(list)
    if (list) {
      this.setState({
        displayArray: list,
        loadMoreVisible: (list.length >= 15 ? true : false),
        currentPage: 2
      });
    }
  };

  setNewData = async (page) => {
    let list = await getProducts(parseInt(page));

    if (list) {
      this.setState({
        displayArray: this.state.displayArray.concat(list),
        loadMoreVisible: (list.length >= 15 ? true : false),
        loadMoreVisibleAtEnd: false,
        currentPage: parseInt(page)+1
      });
    }
  };

  loadMore() {
   this.setNewData(this.state.currentPage);
  }

  displayBtnLoadMore() {
    this.setState({
      loadMoreVisibleAtEnd: true
    });
  }

  async UNSAFE_componentWillMount() {
    this.initListData();
  }

  render() {
    return (
      <View>
        {this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
          <View style={{ flex: 1, marginBottom: 100 }}>
            <SafeAreaView style={styles.container}>
              <FlatList
                data={this.state.displayArray}
                extraData={this.selectedId}
                onEndReached={() => this.displayBtnLoadMore()}
                renderItem={({item})=>
                <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                  <Item
                    item={item}
                    onPress={() => this.props.navigation.navigate('ProductDetails', {productId: parseInt(item.id)})}
                  />
                </View>
                }
                keyExtractor={item => "product-" + item.id.toString()}
                style={{width:"90%"}}
              />
              {this.state.loadMoreVisible === true && this.state.loadMoreVisibleAtEnd === true ? (
                  <Button title=" + " onPress={()=>{this.loadMore()}}></Button>
                ) : null
              }
              <View style={styles.container}>
                <Text>{"\n"}</Text>
                <TouchableOpacity
                  style={styles.touchable2}
                  onPress={() => this.props.navigation.goBack()}
                >
                  <View style={styles.view2}>
                    <Text style={styles.textimg2}>
                      back
                    </Text>
                  </View>
                </TouchableOpacity>
              </View>
              <Text>{"\n\n"}</Text>
            </SafeAreaView>
          </View>
        ) : (
          <View style={styles.container}>
            <Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("products.searching") : i18n.t("products.nodata")) + "\n\n\n"}</Text>
            <TouchableOpacity
              style={styles.touchable2}
              onPress={() => this.props.navigation.goBack()}
            >
              <View style={styles.view2}>
                <Text style={styles.textimg2}>
                  Back
                </Text>
              </View>
            </TouchableOpacity>
          </View>
        )}
    </View>
    );
  };
}

标签： react-native

react-native - 检索产品列表并显示它们

问题描述

解决方案

推荐阅读