Javascript 打开开关后，从react swipeable视图中删除元素

我使用SwipeableView和映射元素从数组中显示。我想在用户每次向左或向右滑动时从数组中删除滑动元素，并显示没有滑动元素的新元素。第一个元素是一张永远不应该被移除的卡，然后我通过数组映射，这时我希望能够移除用户刷卡的值。这是到目前为止我的代码

//onswip函数

onSwipe = (e, index) => {
  console.log(index);
  this.setState({ index: 0 });
  this.setState({ likeDislike: '' });
  const currentUserId = this.state.userData.length && this.state.userData[0].id;

  const newUserDataFunction = () => {
    console.log(index);
    const newUserData = this.state.userData;
    if (index >= 1 && this.state.userData.length) {
      newUserData.slice(1);
    }
    return newUserData;
  };
  const newUserData = newUserDataFunction();
  this.setState({ userData: newUserData });
  let nextValue = 0;
  nextValue = e;
 if (nextValue > this.state.current) {
   console.log('Disliked');
    this.setState({ current: nextValue });
  } else {
   console.log('Liked');
    this.setState({ current: nextValue });
  }
  this.setState({ firstItem: 'SWIPE RIGHT TO CONTINUE' });
  this.setState({ index: 0 });
};

<SwipeableViews style={{ maxHeight: '100%' }} enableMouseEvents onChangeIndex={this.onSwipe} onSwitching={this.onUserSwitch} index={index}>
    <Card>
        <h1>Swipe Right To Begin</h1>      
    </Card>
    {userData.map(user => (
      <div key={user.id}>
        <Header>
          <span style={{ color: 'red' }}>
            {user.username}
          </span>
        </Header>        
      </div>
    ))}    
  </SwipeableViews>;

返回

onSwipe = (e, index) => {
  console.log(index);
  this.setState({ index: 0 });
  this.setState({ likeDislike: '' });
  const currentUserId = this.state.userData.length && this.state.userData[0].id;

  const newUserDataFunction = () => {
    console.log(index);
    const newUserData = this.state.userData;
    if (index >= 1 && this.state.userData.length) {
      newUserData.slice(1);
    }
    return newUserData;
  };
  const newUserData = newUserDataFunction();
  this.setState({ userData: newUserData });
  let nextValue = 0;
  nextValue = e;
 if (nextValue > this.state.current) {
   console.log('Disliked');
    this.setState({ current: nextValue });
  } else {
   console.log('Liked');
    this.setState({ current: nextValue });
  }
  this.setState({ firstItem: 'SWIPE RIGHT TO CONTINUE' });
  this.setState({ index: 0 });
};

<SwipeableViews style={{ maxHeight: '100%' }} enableMouseEvents onChangeIndex={this.onSwipe} onSwitching={this.onUserSwitch} index={index}>
    <Card>
        <h1>Swipe Right To Begin</h1>      
    </Card>
    {userData.map(user => (
      <div key={user.id}>
        <Header>
          <span style={{ color: 'red' }}>
            {user.username}
          </span>
        </Header>        
      </div>
    ))}    
  </SwipeableViews>;

向右滑动开始
{userData.map（用户=>(
{user.username}
))}    
;

目前