Question

注意： 我重新调整了我的问题，使其更容易理解。但是，我保留旧版本用于历史目的。

我有一个React应用程序，当我从箭头函数调用this.setState()时，我得到＆＃34;组件未挂载消息＆＃34;。这是我的组成部分：

import React, { Component } from 'react'

class Test extends Component {
    state = {
        value: ''
    }

    onChange = (e) => {
        e.preventDefault()
        this.setState({
            value: e.target.value
        })
    }

    render() {
        return <input value={ this.state.value } onChange={ this.onChange } />
    }
}

当我输入输入时，收到以下错误消息：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

我不确定为什么会这样，因为箭头函数不应该被分箱，因为这是通过键入触发的，所以组件显然已经安装。

感谢您的帮助！

以下是此问题的上一个版本：

我有一个非常标准的React应用程序，当我从一个调用this.setState()时   箭头功能，我得到＆＃34;组件未挂载消息＆＃34;。

代码看起来像这样：
onClick = () => {
    this.setState({clicked: true})
}

...

render() {
    return <AnotherComponent onClick={ this.onClick } />
}
调用onClick时，我收到此消息：
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.
我不确定是什么导致这种情况，因为我正在使用箭头   功能，但它仍然无法正常工作。

编辑：根据要求，这里是AnotherComponent：
const AnotherComponent = (props) => {
    return (
      <div>
          <Button primary>Reject</Button>
          <Button primary onClick={ props.onClick }>Edit Post</Button>
          <Button primary>Approve</Button>
      </div>
    )
}
由于

Answer 1

当你说onClick={ this.onClick }时，你说“这是一个可以使用的功能”。然而，它失去了它的背景。

在将bind()传递给属性之前，您需要onClick()上下文constructor。最好的地方是你班级的class MyClass extends React.Component { constructor(props) { super(props); // have to do this part in any Component constructor this.onClick = this.onClick.bind(this); } onClick() { this.setState({ clicked: true }); } render() { return <AnotherComponent onClick={ onClick } />; } }。

constructor(props) {
  super(props);

  this.onClick = () => { this.setState({ clicked: true }); };
}

或者，如果你的函数很短，你可以在构造函数中创建它：

for

通过在构造函数的上下文中创建，它将被隐式绑定。

Answer 2

你的组件是完全正确的，现在我们只需要知道你在哪里调用它。

此问题通常来自父级，只需检查父级是否已完全装入。

事实：

onChange不需要e.preventDefault()，
每次您输入输入时，都会调用state，
每次设置state时，
它再次触发生命周期方法render()（它重新加载节点），所以在这种情况下。
当你preventDefault()时，你正在打破生命周期组件的常规流程:) 删除它，警告将消失。

====================第2部分========================= ==

哦，我现在看到，一切都很清楚：D

Whenever you call the onClick = () => {
    this.setState({clicked: true})
}

...

render() {
    return <AnotherComponent onClick={ this.onClick } />
}

您希望通过props传递该功能但是您将其设置为onClick事件，并且它是一个保留字

你应该把它传递给保留的道具，如：

return <AnotherComponent handleClick={ this.onClick } />

然后是孩子：

<Button primary onClick={ props.handleClick }>Edit Post</Button>

现在您创建了一个实际属性

希望它能帮到你:)

在使用ES2016的React中的箭头函数中调用setState时未安装组件

2 个答案: