Reactjs 在react中将函数作为prop传递，无法读取属性'；编辑'；未定义的

我正在学习ReactJS，并基于它创建一个可编辑的神奇宝贝列表

当我试图传递一个函数来编辑一个列表项时（此时我想单击该项并获取名称），我得到

TypeError:无法读取
addPokemon
函数下一行的未定义的属性'edit'：
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;

import React，{Component}来自“React”；
从“/PkmnList”导入PkmnList；
类PkmnForm扩展组件{
静态类型=[
"臭虫",，
"龙",，
“冰”，
"战斗",，
“火”，
“飞行”，
“草”，
“鬼”，
“地面”，
"电动",，
“正常”，
“毒药”，
“通灵的”，
"摇滚",，
“水”
]
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
类型：“”，
口袋妖怪：[]，
抓到:错,，
};
}
handleSubmit=（事件）=>{
变量pokemon={
名称：this.state.name，
类型：this.state.type，
被抓住了：这个州被抓住了
};
这是我的国家({
名称：“”，
类型：“”，
抓到:错,，
口袋妖怪：this.state.pokemons.concat（口袋妖怪）
});
event.preventDefault（）
}
handleChange=（事件）=>{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
handleTypeChange=（事件）=>{
这是我的国家({
类型：event.target.value，
})
}
editPokemon（姓名）{
console.log（名称）；
}
render（）{
返回(
注册神奇宝贝


类型
{PkmnForm.types.map(
选项值=>(
{optionValue}
)
)}


抓住


添加口袋妖怪
);
}
}
导出默认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;

import React，{Component}来自'React'；
类PkmnList扩展组件{
建造师（道具）{
超级（道具）；
this.edit=this.edit.bind（this）；
}
编辑（姓名）{
this.props.edit（名称）；
}
添加口袋妖怪（口袋妖怪）{
返回
this.edit（pokemon.name）}
key={pokemon.name}
>
{pokemon.name}–{pokemon.type}{pokemon.catch？'（catch）''：'}

}
render（）{
var pokemons=this.props.pokemons；
var listItems=pokemons.map（this.addPokemon）；
返回(

{listItems}

);
}
}
导出默认PkmnList；

谢谢：-）
问题出在这行：

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

在这里，您将
this.addPokemon
作为函数传递给
map
。但该函数未绑定到此

，因此在其内部，

此

不可用

您可以通过调用

.bind（this）

显式绑定它，就像您使用

编辑功能所做的那样：

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

或者，您可以传递调用该方法的arrow函数：

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

您需要像这样绑定
editPokemon
：

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

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

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

您还需要绑定
addPokemon
；否则，当您调用
pokemons.map（this.addPokemon）时
，则
此
将在
addPokemon