Javascript 当子组件尝试调用传递的函数时，在React中获取this.props不是函数的typeError

当我试图从子函数调用传递的函数时，我得到以下错误

未捕获类型错误：this.props.addHours不是函数

这里有一个关于这个问题的代码笔：

以下是我的组件代码：

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
    this.addHours = this.addHours.bind(this)

    this.state = {
      flies:[{
      name: 'Elk Hair Caddis',
      hours: 10,
      fish: 12
      },
      {
      name: 'Adams',
      hours: 6,
      fish: 4
      }
      ]
    };
  }

  handleSubmit(event) {
    alert('A fly was submitted');
    event.preventDefault();

    let subName = document.getElementById("subName").value
    let subHours = document.getElementById("subHours").value
    let subFish = document.getElementById("subFish").value

    document.forms[0].reset()

   function flyMaker(name, hours, fish) {
      this.name = name
      this.hours = hours
      this.fish = fish
    }

    let myFly = new flyMaker(subName, subHours, subFish)

    let tempState = this.state.flies
    tempState.push(myFly)
    this.setState(tempState)
  }

 addHours(e){
    e.preventDefault()
    alert('hey')
    console.log('hey')
  }

  render() {
    return <div>
      <h1>Fly List</h1>
         <ul>
          {this.state.flies.map(function(fly){
            return <li><Fly addHours={this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
          })}
        </ul>
      <div id='addFly'>
        <h1>Add a Fly</h1>
        <form onSubmit={this.handleSubmit}>
        <p>Name:</p>
        <input id='subName' type='text'/>
        <p>Hours:</p>
        <input id='subHours' type='text'/>
         <p>Fish Caught:</p>
        <input id='subFish' type='text'/>
          <br/>
        <input type='submit' value='submit' />
        </form>
      </div>
    </div>;
  }
}

class Fly extends React.Component { 
  constructor(props) {
    super(props);
    this.doAddHours = this.doAddHours.bind(this)

  }

  doAddHours() {
    this.props.addHours()
  }

  render() {
    return <div>
      <p>{this.props.name}</p>
      <div>Hours fished: {this.props.hours}</div>
      <div className='increment' onClick={this.doAddHours}>+</div><div className='increment'>-</div>
      <div>Fish Caught: {this.props.fish}</div>
      <div className='increment'>+</div><div className='increment'>-</div>
    </div>;
  }
}

类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.addHours=this.addHours.bind（this）
此.state={
苍蝇：[{
名称：“麋鹿毛Caddis”，
时间:10,，
鱼：12
},
{
名字：“亚当斯”，
时间:6时，
鱼：4
}
]
};
}
handleSubmit（事件）{
警报（“提交了一只苍蝇”）；
event.preventDefault（）；
让subName=document.getElementById（“subName”）.value
设subHours=document.getElementById（“subHours”）.value
让subFish=document.getElementById（“subFish”）.value
document.forms[0].reset（）
功能flyMaker（名称、小时、鱼）{
this.name=name
这个.小时=小时
这条鱼
}
let myFly=新的flyMaker（子名称、子小时、子鱼）
让tempState=this.state.flies
tempState.push（myFly）
this.setState（tempState）
}
附加小时数（e）{
e、 预防默认值（）
警惕（‘嘿’）
console.log（'hey'）
}
render（）{
返回
飞行名单

{this.state.flies.map（函数（fly））{
返回
；
})}

加一只苍蝇
姓名：

工作时间：

捕获的鱼：



;
}
}
类Fly扩展了React.Component{
建造师（道具）{
超级（道具）；
this.doAddHours=this.doAddHours.bind（this）
}
doAddHours（）{
this.props.addHours（）
}
render（）{
返回
{this.props.name}

钓鱼时间：{this.props.Hours}
+-
捕获的鱼：{这个。道具。鱼}
+-
;
}
}

---

基本上，我给子组件传递了一个函数，所以我不确定为什么它不认为道具是一个。我很确定我把所有的事情都联系好了，这是我的第一个猜测，但也许不是。如果有人能指出我做错了什么，我将不胜感激

您没有在

this.state.flies.map

中使用箭头函数，因此它没有获取

this

上下文所需的范围

{this.state.flies.map( fly => {
        return <li><Fly addHours={this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
      })}

{this.state.flies.map（fly=>{
返回
；
})}

您没有在

this.state.flies.map

中使用箭头函数，因此它没有获取

this

上下文所需的范围

{this.state.flies.map( fly => {
        return <li><Fly addHours={this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
      })}

{this.state.flies.map（fly=>{
返回
；
})}
您的
this.state.flies.map中的
this
不是您所期望的。
您应该在调用map之前定义variable，以引用正确的：

render() {

const _this = this;

return <div>
  <h1>Fly List</h1>
     <ul>
      {this.state.flies.map(function(fly){
        return <li><Fly addHours={_this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
      })}
    </ul>
...

render（）{
常数this=这个；
返回
飞行名单

{this.state.flies.map（函数（fly））{
返回
；
})}

...
您的
this.state.flies.map中的
this
不是您所期望的。
您应该在调用map之前定义variable，以引用正确的：

render() {

const _this = this;

return <div>
  <h1>Fly List</h1>
     <ul>
      {this.state.flies.map(function(fly){
        return <li><Fly addHours={_this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
      })}
    </ul>
...

render（）{
常数this=这个；
返回
飞行名单

{this.state.flies.map（函数（fly））{
返回
；
})}

...
这里有两个主要问题：

映射函数正在对
此
上下文进行阴影处理。您可以提取
将其绑定到外部方法，并将其绑定到构造函数中

或者使用一个arrow函数，这样它将为
此
：

this.state.flies.map((fly) => {

          return <li><Fly addHours={this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
        })}


下面是代码的运行示例：


类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
//this.addHours=this.addHours.bind（this）
此.state={
苍蝇：[{
名称：“麋鹿毛Caddis”，
时间:10,，
鱼：12
},
{
名字：“亚当斯”，
时间:6时，
鱼：4
}
]
};
}
handleSubmit（事件）{
//警报（“提交了一只苍蝇”）；
event.preventDefault（）；
让subName=document.getElementById（“subName”）.value
设subHours=document.getElementById（“subHours”）.value
让subFish=document.getElementById（“subFish”）.value
document.forms[0].reset（）
功能flyMaker（名称、小时、鱼）{
this.name=name
这个.小时=小时
这条鱼
}
let myFly=新的flyMaker（子名称、子小时、子鱼）
让tempState=this.state.flies
tempState.push（myFly）
this.setState（tempState）
}
addHours=（e）=>{
e、 预防默认值（）
//警惕（‘嘿’）
console.log（'hey'）
}
render（）{
返回
飞行名单

{this.state.flies.map（（fly）=>{
返回
；
})}

加一只苍蝇
姓名：

工作时间：

捕获的鱼：



;
}
}
类Fly扩展了React.Component{
建造师（道具）{
超级（道具）；
this.doAddHours=this.doAddHours.bind（this）
}
DOADD小时（e）{
此.props.addHours（e）
}
render（）{
返回
{this.props.name}

钓鱼时间：{this.props.Hours}
+-
捕获的鱼：{这个。道具。鱼}
+-
;
}
}
/*
*将上述组件渲染到div#应用程序中
*/
ReactDOM.render（，document.getElementById（'app'）；
html，正文{
身高：100%；
}
身体{
背景：#333；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
字体家族：何
// At the top of the render function somewhere
var _this = this;

// In your return
{
  this.state.flies.map(function(fly) {
    return (
      <li>
        <Fly
          addHours={_this.addHours}
          name={fly.name}
          hours={fly.hours}
          fish={fly.fish}
        />
      </li>;
  })
}