TypeError：_this2.props.someFunciton不是函数 - 反应

Question

虽然有些帖子具有相似的标题，但它们都无关紧要或者没有回答发布的问题。

我在另一个页面中有一个像这样调用的组件：

<SomeComponent  aParticularProp={(arg) => {this.someFunction(arg)}} />

这是SomeComponent的简化版本：

 class SomeComponent extends React.Component{

constructor(props){
    super(props);
    this.state = {someState: "test"};
}

something(){
  return (
      <SpecialButton 
          onClick={() => {this.props.someFunction(this.state.someState)}}
      />
  )

}

render () {
   return (
         {this.something()}
   ); 
}

}

为什么我得到“TypeError：_this2.props.someFunciton不是函数”？

Answer 1

你传递aParticularProp作为prop，而不是SomeFunction ......所以，在SomeComponent中你可以引用this.props.aParticularProp。

并且父组件中的this.someFunction应该在父组件中定义。

Answer 2

如果您尝试将函数从父组件传递到子组件并维护原始上下文，则值得将其绑定到该组件：

<SomeComponent someFunction={this.someFunction.bind(this)} />

或者通过声明你的功能：someFunction = args => {}

更多的是你为什么this2.props.someFunction is not a function，通过将你的函数传递给someFunction={(arg) => {this.someFunction(arg)}}，你实际上并没有将函数传递给子组件，而是调用函数并返回结果。