使用带有 List ITem 的 RN FlatList 的唯一 "key" 道具错误

Question

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

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

目前我有错误：

Each child in a list should have a unique "key" prop

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

代码：

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

使用带有 List ITem 的 RN FlatList 的唯一 "key" 道具错误

unique "key" prop error using RN FlatList with List ITem

javascript

paging

list

react-native

flatlist