Question

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

错误： TypeError: Cannot read property 'characters' of undefined App.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>
    )
  }
}

Table.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

这是典型的this反应陷阱。在大多数情况下，当您将父类的方法作为子类传递给子组件时，您需要绑定其this。

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

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

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

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

Answer 2

使用箭头函数作为类方法：

removeElement = (index)=>{

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

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

TypeError：无法读取未定义的属性“字符”

2 个答案: