javascript - 修复 'Cannot read property handleClick of undefined error'(以及与从 DOM 中删除项目相关的问题)

Question

背景

我正在为学校做一个最终项目，该项目使用卡片显示电视节目/节目列表。我正在尝试设置一种删除卡的方法。我正在经历各种转变，试图让这个删除在我的前端工作。我花了很长时间研究这个问题，现在我想到的每一个解决方案似乎都既正确又错误。

首先，存在一个programId未定义的问题，我已修复该问题。现在我不知道 make 如何使 this.handleClick 中的 this 工作。 This solution让我觉得我可能需要使用绑定(bind)。但我不确定。

代码

这是我的 Program.js 文件的一部分，其中对卡片进行了样式设置，并传入了 Prop 来填充名称、网络和图像等字段。我使用 props.match.params 因为我已经实现了 React Router 并且需要访问每个卡的数据以获取内部的三元语句。编辑:Program.js是一个功能组件。我添加了一个链接。

let handleClick = (id) => {
    this.props.deleteProgram(id)

  }

let program = props.program ? props.program : props.programs[props.match.params.id - 1]
let programId = program.id

    return(
        <Grid.Column>
          <Card onClick={(_) => this.handleClick(programId)}>
            <Image src={program ? program.image : null} wrapped ui={false} />
            <Card.Content>
              <Card.Header>{program ? program.name: null}</Card.Header>
              <Card.Meta>
                <span className='date'>{program ? program.network : null 
                </span>
              </Card.Meta>

这是我的 Programs.js 文件，它创建每个程序组件。我不确定是否应该在创建每个程序的文件中导入我的 {deleteProgram} 操作/函数，或者是否需要直接在程序中导入它。编辑:Programs.js是一个功能组件。我添加了一个链接。

        <Grid columns='six' divided='vertically'>
          <Grid.Row >
              {props.programs.map((program) => <Program key={program.id} program={program} />)}
          </Grid.Row>
        </Grid>

这是 programsReducer 文件，其中包含用于删除程序的 case 语句。

case 'DELETE_PROGRAM':
      const programs = state.programs.filter(program => program.id !== 
          action.id)
      return {programs}

这是我的deleteProgram操作/函数。

return (dispatch) => {
    fetch(`http://localhost:3000/api/v1/programs/${id}`,{
      method: 'DELETE',
      headers: {'Content-Type': 'application/json'}
    })
    .then(res => res.json())
    .then(res => dispatch({type: 'DELETE_PROGRAM', id: id}))
  }
}

问题回顾

1. 您知道为什么我收到 this.handleSubmit 中的 this 未定义的错误吗？

2. 我应该将我的 {deleteProgram} 函数/操作导入哪个文件 --Programs.js(带有 .map)或 Program.js(每个单独的卡)？

奖金回合

如果没记错的话，我需要把这个 onClick 方法放在整个卡上。我很想在卡内制作的删除按钮上调用它。有人可以确认这是否正确吗？

非常感谢您抽出时间! :-)

Answer 1

将代码更改为以下内容:

let handleClick = (id) => {
  props.deleteProgram(id)

  }

let program = props.program ? props.program : props.programs[props.match.params.id - 1]
let programId = program.id

return(
    <Grid.Column>
      <Card onClick={(_) => handleClick(programId)}>
        <Image src={program ? program.image : null} wrapped ui={false} />
        <Card.Content>
          <Card.Header>{program ? program.name: null}</Card.Header>
          <Card.Meta>
            <span className='date'>{program ? program.network : null 
            </span>
          </Card.Meta>