Question

我是ReactJs的新手，我正试图将一个函数传递给我的子组件，以更新父组件中的状态！

子组件似乎找不到传递的函数。

单击时收到的错误消息： TypeError：this.props.cencelLogin不是函数

当我访问子组件时出现另一个提示：“这是一个控制台错误，不会使程序崩溃”：警告：在现有状态转换期间（例如，在render之内，无法更新）。渲染方法应该纯粹是props和state的函数。

I console.log（this.props）=我找不到getBackCancelLoginForm存在的任何证据。 “我是新来的”

我看了一些有关组件通信的视频。似乎这种技术有效。但是，由于一个小错误，这项技术对我不起作用。

这是我的父类组件：

class Menu extends Component {
  constructor(props){
    super(props);

    this.state = {
      show: 'Defualt'
    };

    this.getBackCancelLoginForm = this.getBackCancelLoginForm.bind(this);
  }

  getBackCancelLoginForm = (showVal) => {
    this.setState({ show: showVal });
  }

  render() {

    this.CheckShowMenu();

    return (
      <div>

        { this.state.show === "Defualt" ? <DefualtMenu  cencelLogin={this.getBackCancelLoginForm}/> : (<div> </div>)}

      </div>

    );
  }
}

这是我的孩子班级组成部分：

class loginCom extends Component {
    constructor(props){
      super();

      this.state = {
        cancelSignIn: "Defualt",
      };

      this.cancel = this.cancel.bind(this);
    }

    cancel(props){
      this.props.cencelLogin(this.state.cancelSignIn);
    }

    render() {
      return (
        <div>

        <div className="headerCancelBox" onClick={this.cancel.bind(this)}>

        </div>
      );
    }
}

在实际结果中：形式上的唱歌应该是绝望的。

在子组件上单击“ X”时->函数cancel将触发调用prop函数的函数。导致子功能被另一个子功能“默认菜单”替换

Answer 1

我发现我的愚蠢错误！我不得不承认我花了很多时间来解决这个问题。

我将把答案永远留在这里！

我刚刚将prop传递给了错误的子函数。：）

我将道具“函数”传递给子组件=>错误的道具未定义

1 个答案: