使用 RN FlatList 和 List ITem 时出现独特的“key”属性错误

Question

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

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

目前我有错误：

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

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

代码：

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>
    );
  };
}

Answer 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
   />
))