0

我有一个显示产品列表的屏幕。我正在尝试设置分页。我正在使用 react-native-elements 中的 List 项目，并在此包的文档中尽可能地查看 Using RN FlatList。

我设置了分页功能，但我对代码感到困惑。我不知道如何修复它了。我想知道你是否有可能给我一个提升并重新阅读我的代码来给我你的意见。

目前我有错误：

列表中的每个孩子都应该有一个唯一的“关键”道具

我有点迷路，需要一些指导。感谢您的任何解释。

编码 ：

export default class Products extends Component {
  constructor(props) {
    super(props);
      this.state = {
        productId: (props.route.params && props.route.params.productId ? props.route.params.productId : -1),
        listData: '',
        currentPage: 1,
        loadMoreVisible: true,
        loadMoreVisibleAtEnd: false,
        displayArray: []
      }
    };

  initListData = async () => {
    let list = await getProducts(1);
   
    if (list) {
      this.setState({
        displayArray: list,
        loadMoreVisible: (list.length >= 10 ? 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 >= 10 ? true : false),
        loadMoreVisibleAtEnd: false,
        currentPage: parseInt(page)+1
      });
    }
  };

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

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

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

  renderItem = ({ item, i }) => (
  <ListItem key={i}
    bottomDivider
    containerStyle={{backgroundColor: i % 2 === 0 ? '#fde3a7' : '#fff' }}
    onPress={() => this.props.navigation.navigate('ProductDetails', {productId:parseInt(item.id)})}>
    <Icon name='shopping-cart' />
    <ListItem.Title style={{width: '65%', fontSize: 14, color: i % 2 === 0 ? '#212121' : '#F78400'  }}>{item.name}</ListItem.Title>
    <ListItem.Subtitle style={{ color: '#F78400'}}>{i18n.t("information.cost")}:{item.cost}</ListItem.Subtitle>
  </ListItem>
);

  render() {
  //console.log('displayArray', this.state.displayArray)
    return (
      <View style={{flex: 1}}>
        {this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
          <View style={{ flex: 1}}>
              <SafeAreaView>
                {
                  this.state.displayArray.map((item, i) => (
                    <FlatList
                      keyExtractor={(item, i) => {
                        return item.id;
                      }}
                      data={this.state.displayArray}
                      onEndReached={() => this.displayBtnLoadMore()}
                      renderItem={this.renderItem}
                    />
                  ))
                }
              </SafeAreaView>
              {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.container}>
                    <Button
                      color="#F78400"
                      title= 'Back'
                      onPress={() => this.props.navigation.goBack()}>BACK
                    </Button>
                  </View>
                </TouchableOpacity>
              </View>
              <Text>{"\n\n"}</Text>
          </View>
        ) : (
          <View style={styles.container}>
            <Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("products.searching") : i18n.t("products.nodata")) + "\n\n\n"}</Text>
                <Button
                  color="#F78400"
                  title= 'Back'
                  onPress={() => this.props.navigation.goBack()}>BACK
                </Button>
          </View>
        )}
    </View>
    );
  };
}
4

1 回答 1

1

问题不在于您的列表项，而在FlatList于其本身 - 您正在渲染一组组FlatList件，但它们没有唯一的键。

this.state.displayArray.map((item, i) => (
   <FlatList 
     key={item.id} // or key={i} if item doesn't have ID
     ... rest of your flat list props
   />
))
于 2021-01-22T10:04:08.663 回答