不是reactjs中未定义错误的函数和绑定答案

【问题标题】：not a function and bind of undefined errors in reactjs不是reactjs中未定义错误的函数和绑定
【发布时间】：2017-03-20 12:21:34
【问题描述】：

获取不是函数（或）如果我绑定我得到未定义错误的绑定，我应该如何绑定这些传入值的函数？我在这里想念什么..？需要帮助。

子组件：

constructor(props) {
        super(props);
        this.handler = this.handler.bind(this);
           this.state = {
          isBoolFlag: true,
        }
      }

      onClick(e){
         this.setState({
          isBoolFlag: !this.state.isBoolFlag,
       });
        this.props.handler(!this.state.isBoolFlag); //Error here..

      }

      render() {
        return (
          <div>
                 <a onClick={this.onClick.bind(this)}>
          </div>
        );
      }
    }

父组件：

constructor(props) {
    super(props);
    this.handler = this.handler.bind(this);
    this.state = {
      showModule: false,
    };
  }

 <div>
 {this.state.showModule ? <Child2 /> : <Child1 handler={this.handler} />}
            </div>

【问题讨论】：

标签： reactjs react-native redux jsx

【解决方案1】：

子组件中不需要this.handler = this.handler.bind(this);。函数handler 必须是父函数中定义的函数。

另外，请注意：

this.setState({
          isBoolFlag: !this.state.isBoolFlag,
       });
this.props.handler(!this.state.isBoolFlag); //Error here..

使用此代码您不能依赖 isBoolFlag 被更改在调用 handler 之前的状态因为 setState 是异步的。您应该发送一个回调函数作为setState 的第二个参数。

【讨论】：

感谢您的回复。我已经在 Parent 中定义了它，但我仍然收到 this.props 错误。处理程序不是函数（…）。感谢您指出，我也刚刚意识到 setState 不会立即反映。
没问题 :) 您能否在您的问题中添加 Parent 的组件代码或至少是函数的代码？
我已将 Parent 的组件代码也添加到问题中，如果您看不到，请告诉我.. 再次更新问题stackoverflow.com/users/6499571/c%c3%a9sar-landesa

【解决方案2】：

更新：

我错过了将处理程序传递给组件，就像我为 . 所做的那样。

【讨论】：

【解决方案3】：

您需要在 setState 中使用回调函数，因为 setState 需要一些时间来改变状态并且 javascript 是异步的，因此 this.state.isBookFlag 仅用于其先前的状态。

像这样使用它

this.setState({
          isBoolFlag: !this.state.isBoolFlag,
       }, function(){
      this.props.handler(!this.state.isBoolFlag);
 });

另外你只需要在父组件中绑定handler函数，不需要在子组件中

代码子组件。

constructor(props) {
    super(props);

       this.state = {
      isBoolFlag: true,
    }
  }

  onClick(e){
     this.setState({
          isBoolFlag: !this.state.isBoolFlag,
       }, function(){
      if(this.props.handler !== undefined) {
         this.props.handler(!this.state.isBoolFlag);
      }
     });

  }

  render() {
    return (
      <div>
             <a onClick={this.onClick.bind(this)}>
      </div>
    );
  }
}

家长：

constructor(props) {
    super(props);
    this.state = {
      showModule: false,
    };
  }

 <div>
 {this.state.showModule ? <Child2 /> : <Child1 handler={this.handler.bind(this)} />}
            </div>

【讨论】：

是的，我已经在父组件中了 - 但仍然是同样的错误...stackoverflow.com/users/5928186/shubham-khatri
@monkeyjs 您正在根据条件创建子组件，因此在子组件中您需要在调用之前检查处理函数是否已定义。查看更新的代码