javascript - 类型错误 : Cannot read property 'characters' of undefined

Question

我添加了一个我想在按钮上使用的方法。我试图从表中删除一个字段，但出现错误。我最初用数组声明了状态。我假设在使用过滤后的数组设置状态时会生成此错误。我不确定这里出了什么问题。

错误:TypeError: Cannot read property 'characters' of undefined
应用程序.js:

import Table from './Table';
import React, { Component } from 'react'

export default class App extends Component {
  state={
    characters : [
      {
        name: 'Smit',
        job: 'Theme Specialist',
      },
      {
        name: 'Charlie',
        job: 'Janitor',
      },
      {
        name: 'Mac',
        job: 'Bouncer',
      },
      {
        name: 'Dee',
        job: 'Aspring actress',
      },
      {
        name: 'Dennis',
        job: 'Bartender',
      },
    ]
  }

  removeElement(index){

    this.setState({
     characters: this.state.characters.filter(i=>{
        return i !== index
      })

    })
    console.log("remove"+this.state.characters)
  }
  render() {

    return (
      <div>
           <Table data={this.state.characters} deleted={this.removeElement}/>
      </div>
    )
  }
}

表.js:

import React, { Component } from 'react'




function TableHeader() {
    return (
        <thead>
        <tr>
          <th>Name</th>
          <th>Job</th>
        </tr>
      </thead>
    )
}

function TableBody(props) {

       const dataBody= props.data.map( (index)=>{

               return(

                    <tr key={index.data}>

                        <td>
                         {index.name}
                        </td>
                        <td>
                         {index.job}
                        </td>
                        <button onClick={()=>
                            props.deleted(index)
                        }>
                            Delete
                        </button>
                    </tr>

               )
           })
    return(
        <tbody>
            {dataBody}
        </tbody>
    ) 


}

export default class Table extends Component {
    render() {


        return (

    <table>
       <TableHeader/>
       <TableBody data={this.props.data} deleted={this.props.deleted}/>

      </table>

        )
    }

}

Answer 1

这是一个典型的 react this陷阱。当您将父类的方法作为 prop 传递给子组件时，大多数情况下，您需要它的 this边界。

<Table
    data={this.state.characters}
    deleted={this.removeElement.bind(this)}
/>

更好的是，您可以首先使用箭头函数语法来声明方法，因此您无需担心 this后面的问题。

removeElement = (index) => { ... }

现在 .bind(this)不再需要。