React redux Connect和dispatch does'；nt在一个文件中为多个类组件工作

以前，当我有一个单一类组件redux时，它可以很好地从应用商店获取分派函数，但我想为我的视频项目增加一个附加功能，所以我必须创建另一个类组件，并从中调用一个函数到连接的类组件，这看起来像是连接和分派函数不能按预期工作。代码如下所示：

const viewabilityConfig = {
  itemVisiblePercentThreshold: 80,
};

class Item extends React.Component {

  constructor(props) {
    super(props);
    Obj = new HomeFeed();
  }

  CallFunctionPauseAndPlay=()=>{
 
      Obj.handleClick() ;
 
     }

  CallFunctionLikeAndUnlike=(post,Uid)=>{
 
      Obj.likePost(post,Uid) ;
 
     }

  state = {
    modalVisible: false
  };

  setModalVisible = (visible) => {
    this.setState({ modalVisible: visible });
  }

  componentWillUnmount() {
    if (this.video) {
      this.video.unloadAsync();
    }
  }

  async play() {
    const status = await this.video.getStatusAsync();
    if (status.isPlaying) {
      return;
    }
    return this.video.playAsync();
  }

  pause() {
    if (this.video) {
      this.video.stopAsync();
    }
  }

  render() {
    const { id, postVideo,Username,postDescription,bookmarks,likes,profilePic,storageLocation,comments,type,uid,Item,Uid} = this.props;
    const { modalVisible } = this.state;
    return (
      <View style={styles.cell}>
        <DoubleClick onClick={this.CallFunctionPauseAndPlay} onDoubleClick={() => this.CallFunctionLikeAndUnlike(Item,Uid)}>
        <Video
          ref={(ref) => {
            this.video = ref;
          }}
          source={{ uri: postVideo }}
          shouldPlay={false}
          rate={1.0}
          volume={1.0}
          isMuted={false}
          resizeMode="cover"
          style={styles.full}
        />
        </DoubleClick>

            <View style={styles.mainContainer}>
                 <View style={styles.innerLeft}>
                    <View style={styles.dataContainer}>
                        <View style={styles.user}>
                            <ImageBackground
                              source={{uri: profilePic}}
                              style={styles.profile}
                              borderRadius={25}
                            >
                            </ImageBackground>
                                <Text style={{color: '#fff',fontSize: 13.5,marginLeft:10,paddingBottom:5.5,fontWeight: "bold"}}> {Username}  |</Text>
                
                                <Text style={{color: '#fff',fontSize: 13.5,paddingBottom:5.5,fontWeight: "bold"}}>   Follow</Text>                            
                                <Modal
                              animationType="none"
                              transparent={true}
                              visible={modalVisible}
                            >
                                <View style={styles.centeredView}>
                                 <View style={styles.modalView}>
                                     <TouchableOpacity>
                                        <Text style={styles.modalButton}>Report</Text>
                                     </TouchableOpacity>
                                     <TouchableOpacity>
                                        <Text style={styles.modalButton}>Download Post</Text>
                                     </TouchableOpacity>
                                     <TouchableOpacity onPress={() => {this.setModalVisible(!modalVisible);}}>
                                       <Text style={styles.modalButton}>Close</Text>
                                     </TouchableOpacity>
                                </View>
                                </View>
                            </Modal>    
                                
                                
                        </View>
                       
                                <Text style={styles.description} numberOfLines={1}> {postDescription} </Text>

                                    <View style={styles.music}>
                                        <TouchableOpacity>
                                        {likes.includes(uid) ?
                                        <MaterialCommunityIcons name="cards-heart" size={25} color="#db565b" />
                                        :
                                        <MaterialCommunityIcons name="cards-heart" size={25} color="#e5e5e5" />
                                        }
                                        </TouchableOpacity>
                                        <Text style={{color: '#fff',fontSize:12.5,marginLeft:5,marginRight:14,fontWeight:'bold'}}> {likes.length} </Text>

                                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Comment',{val: id, val2: uid, val3: postVideo,Profile: 'PROFILE_POSTS'})}>

                                        <MaterialCommunityIcons name="chat" size={25} color="#e5e5e5" />
                                        </TouchableOpacity>

                                        <Text style={{color: '#fff',marginLeft:5,marginTop:1.5,fontWeight:'bold',fontSize:12.5}}> {comments.length} </Text>

                                        <TouchableOpacity>
                                        <Icon name="ios-paper-plane" style={{marginLeft:16}} size={25} color="#e5e5e5" />
                                        </TouchableOpacity>

                                        <TouchableOpacity onPress={() => this.BookmarkPost(item)}>
                                        {bookmarks.includes(uid) ?
                                        <MaterialCommunityIcons name='bookmark' size={25} color="#e5e5e5" style={{marginLeft:24}}/>
                                        :
                                        <MaterialCommunityIcons name='bookmark-outline' size={25} color="#e5e5e5" style={{marginLeft:24}}/>
                                        }
                                        </TouchableOpacity>

                                        <TouchableOpacity>
                                        <MaterialCommunityIcons
                                          name="music-circle-outline"
                                          size={25}
                                          color="#fff"
                                          style={{marginRight: 6,marginLeft:25}}
                                        />
                                        </TouchableOpacity>

                                        <TouchableOpacity onPress={() => {this.setModalVisible(true);}}>
                                           <MaterialCommunityIcons name="dots-vertical" size={25} color="#e5e5e5" style={{marginLeft:10,width:60}} />
                                        </TouchableOpacity>
                                    </View>
                    </View>
                 </View>
        </View>
      </View>
    );
  }
}

class DoubleClick extends Component {
  constructor(props) {
    super(props);
    this.state = {lastClick: 0};
  }

onPress = () => {
    this.state.lastClick++
    if(this.state.lastClick == 1) {
        setTimeout(() => {
        if(this.state.lastClick == 1) {
            this.props.onClick()
        } else {
        this.props.onDoubleClick()
        }
        this.state.lastClick = 0;
    },250);
  }  
  }

  render() {

    return (
      <TouchableWithoutFeedback style={this.props.style} onPress={this.onPress} >
        {this.props.children}
      </TouchableWithoutFeedback>
    );
  }
}

class HomeFeed extends React.Component {
  constructor(props) {
    super(props);
    this.cellRefs = {};
  }

  ////////-----------------------------> Video scroll play ----start

  _onViewableItemsChanged = (props) => {
    const changed = props.changed;
    changed.forEach((item) => {
      const cell = this.cellRefs[item.key];
      if (cell) {
        if (item.isViewable) {
          cell.play();
        } else {
          cell.pause();
        }
      }
    });
  };

  _renderItem = ({ item }) => {
    return (
      <Item
        Item={item}
        Uid={this.props.user.uid}
        ref={(ref) => {
          this.cellRefs[item.id] = ref;
        }}
        {...item}
      />
    );
  };

  ////////-----------------------------> Video scroll play ----end

  state = {
    modalVisible: false
  };

  setModalVisible = (visible) => {
    this.setState({ modalVisible: visible });
  }

  componentDidMount() {
    this.props.getPosts()
  }

  handleClick() {
    Alert.alert('Clicked me once');
  }

  likePost = (post,Uid) => {
    //const { uid } = this.props.user
    if(post.likes.includes(Uid)){
      this.props.unlikePost(post)
    } else {
      this.props.likePost(post)
    }
  }

  BookmarkPost = (post) => {
    const { uid } = this.props.user
    if(post.bookmarks.includes(uid)){
      this.props.RemoveBookmark(post)
    } else {
      this.props.AddBookmark(post)
    }
  }

  render() {
    const { modalVisible } = this.state;
    if(this.props.post === null) return null
    return (
      <View style={styles.container}>
      <StatusBar backgroundColor='black' barStyle="light-content"/>
        <FlatList
          style={{ flex: 1 }}
          data={this.props.post.feed}
          pagingEnabled={true}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item) => item.id}
          onViewableItemsChanged={this._onViewableItemsChanged}
          initialNumToRender={3}
          maxToRenderPerBatch={3}
          windowSize={5}
          getItemLayout={(_data, index) => ({
            length: height,
            offset: height * index,
            index,
          })}
          viewabilityConfig={viewabilityConfig}
          removeClippedSubviews={true}
          renderItem={this._renderItem}
        />
        <View style={styles.header}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Search')}>
        <Icon name="ios-arrow-back" size={27} color="#e5e5e5" style={{marginLeft:10,width:25}}/>
        </TouchableOpacity>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('HomePhotoFeed')} style={[styles.navigate,{borderRadius: 20,borderWidth:1.5,borderColor:'#e5e5e5',marginTop:0}]}>
              <Text style={{ color:'#e5e5e5'}}> Photos </Text>
          </TouchableOpacity>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('VideoCam')}>
          <Icon name="ios-camera" size={35} color="#e5e5e5" style={{marginLeft:205,paddingTop:1.5}}/>
        </TouchableOpacity>
          </View>
      </View>
    );
  }
}



const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ getPosts,getBookmarks, likePost, unlikePost,AddBookmark,RemoveBookmark }, dispatch) 
}

const mapStateToProps = (state) => {
  return {
    post: state.post, 
    user: state.user
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeFeed)

常量可视性配置={
itemVisiblePercentThreshold:80，
};
类项扩展了React.Component{
建造师（道具）{
超级（道具）；
Obj=新的HomeFeed（）；
}
调用函数pauseandplay=（）=>{
对象handleClick（）；
}
CallFunctionLikeAndUnlike=（post，Uid）=>{
对象likePost（post，Uid）；
}
状态={
modalVisible:false
};
setModalVisible=（可见）=>{
this.setState（{modalVisible:visible}）；
}
组件将卸载（）{
如果（本视频）{
this.video.unloadAsync（）；
}
}
异步播放（）{
const status=wait this.video.getStatusAsync（）；
如果（状态显示）{
返回；
}
返回此.video.playsync（）；
}
暂停（）{
如果（本视频）{
this.video.stopAsync（）；
}
}
render（）{
const{id，postVideo，用户名，postDescription，书签，likes，profilePic，storageLocation，comments，type，uid，Item，uid}=this.props；
const{modalVisible}=this.state；
返回(
this.callFunctionLikeAndUnike（Item，Uid）}>
{
this.video=ref；
}}
source={{uri:postVideo}}
shouldlplay={false}
速率={1.0}
卷={1.0}
Ismute={false}
resizeMode=“封面”
style={style.full}
/>
{Username}|
跟随
报告
下载帖子
{this.setModalVisible（！modalVisible）；}}>
接近
{postDescription}
{喜欢。包括（uid）？
:
}
{likes.length}
this.props.navigation.navigate（'Comment'，{val:id，val2:uid，val3:postVideo，Profile:'Profile_POSTS'}）}>
{comments.length}
此.BookmarkPost（项目）}>
{书签。包括（uid）？
:
}
{this.setModalVisible（true）；}>
);
}
}
类双击扩展组件{
建造师（道具）{
超级（道具）；
this.state={lastClick:0}；
}
onPress=（）=>{
单击this.state.last++
如果（this.state.lastClick==1）{
设置超时（（）=>{
如果（this.state.lastClick==1）{
this.props.onClick（）
}否则{
this.props.onDoubleClick（）中
}
this.state.lastClick=0；
},250);
}  
}
render（）{
返回(
{this.props.children}
);
}
}
类HomeFeed扩展了React.Component{
建造师（道具）{
超级（道具）；
this.cellRefs={}；
}
////////----------------------------->视频滚动播放----开始
_onViewableItemsChanged=（道具）=>{
const changed=props.changed；
已更改。forEach（（项目）=>{
const cell=this.cellRefs[item.key]；
如果（单元）{
如果（项目.可见）{
cell.play（）；
}否则{
暂停（）；
}
}
});
};
_renderItem=（{item}）=>{
返回(
{
this.cellRefs[item.id]=ref；
}}
{…项目}
/>
);
};
////////----------------------------->视频滚动播放----结束
状态={
modalVisible:false
};
setModalVisible=（可见）=>{
this.setState（{modalVisible:visible}）；
}
componentDidMount（）{
this.props.getPosts（）
}
handleClick（）{
Alert.Alert（'Clicked me one'）；
}
likePost=（post，Uid）=>{
//const{uid}=this.props.user
if（post.likes.includes（Uid））{
此.props.unlikePost（post）
}否则{
此.props.likePost（post）