在反应中将函数作为道具传递，无法读取未定义的属性"编辑"

Question

我正在学习ReactJS，并且正在根据本指南创建一个可编辑的神奇宝贝列表。

当我尝试传递一个函数来编辑列表项时(此时我想单击该项并获取名称(，我在addPokemon函数的以下行得到TypeError: Cannot read property 'edit' of undefined：onClick={() => this.edit(pokemon.name)}

法典：

PkmnForm

import React, { Component } from "react";
import PkmnList from "./PkmnList";
class PkmnForm extends Component {
static types = [
'Bug',
'Dragon',
'Ice',
'Fighting',
'Fire',
'Flying',
'Grass',
'Ghost',
'Ground',
'Electric',
'Normal',
'Poison',
'Psychic',
'Rock',
'Water'
]
constructor(props) {
super(props);
this.state = {
name: '',
type: '',
pokemons: [],
caught: false,
};
}
handleSubmit = (event) => {
var pokemon = {
name: this.state.name,
type: this.state.type,
caught: this.state.caught
};
this.setState({
name: '',
type: '',
caught: false,
pokemons: this.state.pokemons.concat(pokemon)
});
event.preventDefault()
}
handleChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleTypeChange = (event) => {
this.setState({
type: event.target.value,
})
}
editPokemon(name) {
console.log(name);
}
render() {
return (
<div>
<div>
<h1>Register a Pokémon</h1>
<form onSubmit={this.handleSubmit}>
<input 
required
placeholder=" Name"
name="name"
onChange={this.handleChange}
value={this.state.name} 
/>
<br />
<select 
name="type"
required
value={this.state.type}
onChange={this.handleChange}
>
<option value='' disabled>Type</option>
{PkmnForm.types.map(
optionValue => (
<option
key={optionValue}
value={optionValue}
>
{optionValue}
</option>
)
)}
</select>
<br />
<label>
Caught
<input
name="caught"
type="checkbox"
checked={this.state.caught}
onChange={this.handleChange}
/>
</label>
<br />
<button type="submit">Add Pokemon</button> 
</form>
</div>
<div>
<PkmnList
pokemons={this.state.pokemons}
edit={this.editPokemon}
/>
</div>
</div>
);
}
}
export default PkmnForm;

PkmnList

import React, { Component } from 'react';
class PkmnList extends Component {
constructor(props) {
super(props);
this.edit = this.edit.bind(this);
}
edit(name) {
this.props.edit(name);
}
addPokemon(pokemon) {
return <li 
onClick={() => this.edit(pokemon.name)}
key={pokemon.name}
>
{pokemon.name} – {pokemon.type} {pokemon.caught ? '(caught)' : ''}
</li>
}
render() {
var pokemons = this.props.pokemons;
var listItems = pokemons.map(this.addPokemon);
return (
<ul>
{listItems}
</ul>
);
}
}
export default PkmnList;

谢谢 ：-(

Answer 1

问题出在这一行：

var listItems = pokemons.map(this.addPokemon);

在这里，您将this.addPokemon作为函数传递给map。但是该功能不受this约束，因此在其中，this不可用。

你必须通过调用.bind(this)来显式绑定它，就像你对edit函数所做的那样：

var listItems = pokemons.map(this.addPokemon.bind(this));

或者，您可以传递一个调用该方法的箭头函数：

var listItems = pokemons.map(x => this.addPokemon(x));

Answer 2

你需要像这样绑定editPokemon：

constructor(props) {
super(props);
this.editPokemon = this.editPokemon.bind(this);
}

或者，您也可以使用具有适当范围的箭头函数：

editPokemon = (pokemon) => {
...
}