Javascript 将调度传递给onClick事件Redux

我正在深入研究我的第一个react/redux应用程序，并且在将分派操作映射到组件中的onClick事件时遇到了不少问题

我尝试了几种将onClick事件绑定到调度的方法，但最终的结果总是：

ReferenceError:onMovieClick未定义

或者，当我正确绑定一个函数时，我会得到一个与

分派未定义相关的错误

我的目标
我试图实现一个过滤器（删除）从存储功能

actions/movieActions.js

import * as actionTypes from './actionTypes'

export const createMovie = (movie) => {
  return {
    type: actionTypes.CREATE_MOVIE,
    movie
  }
};

export const deleteMovie = (id) => {
  console.log('action triggered. movie index:' + id)
  return {
    type: actionTypes.DELETE_MOVIE,
    id
  }
}

export default (state = [], action) => {
  switch (action.type){
    case 'CREATE_MOVIE':
      return [
        ...state,
        Object.assign({}, action.movie)
      ];
    case 'DELETE_MOVIE':
      return [
        state.filter(({ id }) => id  !== action.id)
      ]
    default:
          return state;
  }
};

import React from 'react'
import Slider from 'react-slick'
import { dispatch, connect } from 'react-redux'
import {Icon} from 'react-fa'
import { deleteMovie } from '../../actions/movieActions'

import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
import './MovieList.scss'

class MovieList extends React.Component{
  constructor(props){
    super (props)
  }

  handleClick(id) {
    dispatch(deleteMovie(id))
  }

  onMovieClick(id){
   dispatch.deleteMovie(id)
  }

  render () {
    // Settings for slick-carousel
    let settings = {
      infinite: true,
      speed: 500
    }

    return (
      <div className='col-lg-12'>
        {this.props.movies.map((b, i) =>
          <div key={i} className="col-lg-2">
            <Slider {...settings}>
              {b.images.map((b, z) =>
                <div className="img-wrapper">
                  <Icon name="trash" className="trash-icon" onClick={() =>
                    console.log(this.props.movies[i].id),
                    onMovieClick(this.props.movies[i].id)
                  }/>
                  <img className="img-responsive" key={z} src={b.base64}></img>
                </div>
              )}
            </Slider>
            <div className="text-left info">
              <h2>{b.title}</h2>
              <p>{b.genre}</p>
            </div>
          </div>
        )}
      </div>
    )
  }
}

// map state from store to props

const mapStateToProps = (state) => {
  return {
    movies: state.movies
  }
};

// Map actions to props
const mapDispatchToProps = (dispatch) => {
  return {
    onMovieClick: (id) => {
      dispatch(deleteMovie(id))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MovieList)

减速器/movieReducers.js

import * as actionTypes from './actionTypes'

export const createMovie = (movie) => {
  return {
    type: actionTypes.CREATE_MOVIE,
    movie
  }
};

export const deleteMovie = (id) => {
  console.log('action triggered. movie index:' + id)
  return {
    type: actionTypes.DELETE_MOVIE,
    id
  }
}

export default (state = [], action) => {
  switch (action.type){
    case 'CREATE_MOVIE':
      return [
        ...state,
        Object.assign({}, action.movie)
      ];
    case 'DELETE_MOVIE':
      return [
        state.filter(({ id }) => id  !== action.id)
      ]
    default:
          return state;
  }
};

import React from 'react'
import Slider from 'react-slick'
import { dispatch, connect } from 'react-redux'
import {Icon} from 'react-fa'
import { deleteMovie } from '../../actions/movieActions'

import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
import './MovieList.scss'

class MovieList extends React.Component{
  constructor(props){
    super (props)
  }

  handleClick(id) {
    dispatch(deleteMovie(id))
  }

  onMovieClick(id){
   dispatch.deleteMovie(id)
  }

  render () {
    // Settings for slick-carousel
    let settings = {
      infinite: true,
      speed: 500
    }

    return (
      <div className='col-lg-12'>
        {this.props.movies.map((b, i) =>
          <div key={i} className="col-lg-2">
            <Slider {...settings}>
              {b.images.map((b, z) =>
                <div className="img-wrapper">
                  <Icon name="trash" className="trash-icon" onClick={() =>
                    console.log(this.props.movies[i].id),
                    onMovieClick(this.props.movies[i].id)
                  }/>
                  <img className="img-responsive" key={z} src={b.base64}></img>
                </div>
              )}
            </Slider>
            <div className="text-left info">
              <h2>{b.title}</h2>
              <p>{b.genre}</p>
            </div>
          </div>
        )}
      </div>
    )
  }
}

// map state from store to props

const mapStateToProps = (state) => {
  return {
    movies: state.movies
  }
};

// Map actions to props
const mapDispatchToProps = (dispatch) => {
  return {
    onMovieClick: (id) => {
      dispatch(deleteMovie(id))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MovieList)

组件/MovieList.js

import * as actionTypes from './actionTypes'

export const createMovie = (movie) => {
  return {
    type: actionTypes.CREATE_MOVIE,
    movie
  }
};

export const deleteMovie = (id) => {
  console.log('action triggered. movie index:' + id)
  return {
    type: actionTypes.DELETE_MOVIE,
    id
  }
}

export default (state = [], action) => {
  switch (action.type){
    case 'CREATE_MOVIE':
      return [
        ...state,
        Object.assign({}, action.movie)
      ];
    case 'DELETE_MOVIE':
      return [
        state.filter(({ id }) => id  !== action.id)
      ]
    default:
          return state;
  }
};

import React from 'react'
import Slider from 'react-slick'
import { dispatch, connect } from 'react-redux'
import {Icon} from 'react-fa'
import { deleteMovie } from '../../actions/movieActions'

import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
import './MovieList.scss'

class MovieList extends React.Component{
  constructor(props){
    super (props)
  }

  handleClick(id) {
    dispatch(deleteMovie(id))
  }

  onMovieClick(id){
   dispatch.deleteMovie(id)
  }

  render () {
    // Settings for slick-carousel
    let settings = {
      infinite: true,
      speed: 500
    }

    return (
      <div className='col-lg-12'>
        {this.props.movies.map((b, i) =>
          <div key={i} className="col-lg-2">
            <Slider {...settings}>
              {b.images.map((b, z) =>
                <div className="img-wrapper">
                  <Icon name="trash" className="trash-icon" onClick={() =>
                    console.log(this.props.movies[i].id),
                    onMovieClick(this.props.movies[i].id)
                  }/>
                  <img className="img-responsive" key={z} src={b.base64}></img>
                </div>
              )}
            </Slider>
            <div className="text-left info">
              <h2>{b.title}</h2>
              <p>{b.genre}</p>
            </div>
          </div>
        )}
      </div>
    )
  }
}

// map state from store to props

const mapStateToProps = (state) => {
  return {
    movies: state.movies
  }
};

// Map actions to props
const mapDispatchToProps = (dispatch) => {
  return {
    onMovieClick: (id) => {
      dispatch(deleteMovie(id))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MovieList)

从“React”导入React
从“react slick”导入滑块
从“react-redux”导入{dispatch，connect}
从“react fa”导入{Icon}
从“../../actions/movieActions”导入{deleteMovie}
导入'slick carousel/slick/slick.css'
导入'slick carousel/slick/slick theme.css'
导入“./MovieList.scss”
类MovieList扩展了React.Component{
建造师（道具）{
超级（道具）
}
handleClick（id）{
调度（删除电影（id））
}
onMovieClick（id）{
dispatch.deleteMovie（id）
}
渲染（）{
//滑动转盘的设置
让设置={
无限：是的，
速度：500
}
返回(
{this.props.movies.map（（b，i）=>
{b.images.map（（b，z）=>
console.log（this.props.movies[i].id），
onMovieClick（this.props.movies[i].id）
}/>
)}
{b.title}
{b.genre}

)}
)
}
}
//将状态从存储映射到道具
常量mapStateToProps=（状态）=>{
返回{
电影：国家电影
}
};
//将动作映射到道具
const mapDispatchToProps=（调度）=>{
返回{
onMovieClick：（id）=>{
调度（删除电影（id））
}
}
}
导出默认连接（MapStateTrops、mapDispatchToProps）（MovieList）

如果有人有时间的话，我希望得到一些建议。
因为您正在通过连接传递MovieClick，所以您实际上可以从MovieList组件道具调用它。首先，我将删除MovieList组件中的
onMovieClick
方法定义，然后在
图标的onclick处理程序中使用
this.props.onMovieClick
，如下所示：



console.log（this.props.movies[i].id），
this.props.onMovieClick（this.props.movies[i].id）
}/>
您在MovieClick上有重复的
定义，一个在props中，一个在method of MovieListFy中。如果您“在新选项卡中打开”，我相信这不会起作用