FlatList 渲染项目两次

Question

不知何故，renderItem 函数调用了我的值两次。我正在使用最新的 React Native 0.63。下面也提供了我的值输出示例。输出索引为0, 1, 2, 3。2和3重复0和1。

const Cart = () => {
  const sumTotal = useSelector((state) => state.cart.sumTotal);
  const cartItemList = [];
  const cartItem = useSelector((state) => {
    for (const key in state.cart.items) {
      cartItemList.push({
        prodId: key,
        prodQuantity: state.cart.items[key].quantity,
        prodPrice: state.cart.items[key].price,
        prodTitle: state.cart.items[key].title,
        prodSum: state.cart.items[key].sum,
      });
    }
    return cartItemList;
  });

  const renderItem = (itemData) => (
    console.log(itemData),
    (
      <View>
        <Text>{itemData.item.prodQuantity}</Text>
        <Text>{itemData.item.prodTitle}</Text>
        <Text>{itemData.item.prodSum}</Text>
      </View>
    )
  );

  return (
    <View style={styles.screen}>
      <View style={{height: '90%'}}>
        <FlatList
          data={cartItemList}
          renderItem={renderItem}
          keyExtractor={(item, index) => 'key' + index}
        />
      </View>
    </View>
  );
};

export default Cart;