react-native-swiper奇怪行为

Question

在我的应用程序中，我使用了react-native-swiper组件。最初它工作正常，但最近它有一个奇怪的行为。它有5个窗口，像这样滑动。1-2-3-4-5-1

它刷了7次，物品是这样的。从第一个开始。我可以向左划一次。向右滑动5次。这就是全部。

我该如何解决这个问题？我使用的是1.5.6版本

import React from "react";
import { Dimensions } from "react-native";
import Swiper from "react-native-swiper";
import SwiperWindow from "../SwiperWindow/SwiperWindow";

const height = Dimensions.get("window").height * 0.3;

const swiperContainer = props => (
  <Swiper height={height} 
    showsButtons={true}
    showsPagination={false}>

    {props.featuredWorkouts.map(featuredWorkout => {
      return(
      <SwiperWindow
        key={featuredWorkout.featuredWorkoutId}
        imageSource={featuredWorkout.postImage}
        workoutTitle={featuredWorkout.title}
      />)
    })}
  </Swiper>
);

export default swiperContainer;

Answer 1

从这个线程，https://github.com/leecade/react-native-swiper/issues/569，

看起来这个问题可以通过，

我观察到，如果在父组件中调用setState，则会触发swiper组件的componentWillReceiveProps，nextProps与当前swiper组件的props完全相同。而且还会调用swiper组件的setState和initState，因此swiper状态会变得混乱。

为了解决这个问题，我在componentWillReceiveProps中临时添加了if (nextProps.index === this.props.index) return；。

此解决方案由HuiSF在此线程中提供。

Answer 2

添加key={allPins.length}。在Swiper内部，如下所示，它对我有效

<Swiperkey={allPins.length}}>
</Swiper>

这里的allPins.length只是dynamicArray.length。