TypeError.无法将子组件中未定义的属性'setState'读到父组件中。无法将子组件中未定义的属性 "setState "读到父组件。

Question

我得到了以下错误。

TypeError: Cannot read property 'setState' of undefined
closeAlert

好像是绑定或道具的问题？

那我应该怎么做呢？

主组件。

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

    this.state = {
        alertOpen : false
    };

    this.closeAlert.bind(this);
}

closeAlert(event) {
    this.setState({
        closeAlert : true
    });
}

render() {
    return (
        <div>
            <AlertWindow
closeAlert={this.closeAlert}
             />
        </div>
    );
}
}

子组件。

    const AlertWindow = ({ closeAlert }) => {
    return (
    <Alert type="primary">

    <Button
      color="secondary"
      RootComponent="button"
      onClick={(event) => {
        closeAlert(event)
      }}
    >
      No, thanks
    </Button>
  </Button.List>
   </Alert>
  );
  };

Answer 1

你的bind语句不正确，请改成如下。

this.closeAlert = this.closeAlert.bind(this);

你需要把绑定的函数分配给类方法。没有赋值的绑定是不够的。

希望能帮到你!

Answer 2

我想你在命名上有点混淆了。你是在设置 alertOpen 狀態.不太確定 AlertWindow 但你需要一个能调用closeAction的动作（如 onClick={this.closeAlert})

另外，正如 @Alexander 所说，你的绑定并不正确，你的 "打开 "和 "关闭 "混淆了，所以我不知道初始状态应该是什么。

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

        this.state = {
            alertOpen : true
        };

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

    closeAlert(event) {
        this.setState({
            alertOpen : false
        });
    }

    render() {
        return (
            <AlertWindow
closeAlert={this.state.closeAlert}
             />
        );
    }
}

你的 "打开 "和 "关闭 "混在一起，所以我不知道初始状态应该是什么。

Answer 3

另一个简单的解决方法：将你的cloaseAlert方法转换为.NET方法，这样你就不需要绑定语句了。

closeAlert=(event)=> {
  this.setState({
    closeAlert : true
  });
}

现在你不需要在构造函数中为该方法绑定语句了。