首页 > 解决方案 > 将回调函数传递给子组件,不是函数错误

问题描述

_videos.filteredVideo) is not a function当我尝试从子组件分派操作时出现错误。如何将一个传递action给我的子组件?

我有这个容器组件:

class SearchScreen extends React.Component {

  filterVideo = payload => {
    filteredVideo(payload);
  };
  render() {
    return (
      <View style={styles.container}>
        <Search {...this.props} filterVideo={this.filterVideo} />
      </View>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  filteredVideo: () => dispatch(filteredVideo())
});

const mapStateToProps = state => {
  return {
    videos: state.videos
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchScreen);

子组件:

  filteredVideo = filteredData => {
        const { filterVideo } = this.props;

        filterVideo(filteredData); //_videos.filteredVideo) is not a function
    };

    filterList = event => {
        let videos = this.state.initialVideos;

        let {
            nativeEvent: { text }
        } = event;
        let filteredData = videos.filter(item =>
            item.title.toLowerCase().includes(text.toLowerCase())
        );

        this.filteredVideo(filteredData);
    };

标签: javascriptreactjsreact-redux

解决方案


推荐阅读