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

Question

注：我重构了我的问题以使其更易于理解。但是，为了历史目的，我保留了旧版本。

我有一个React应用程序，当我通过箭头函数调用this.setState()时，我得到了“component not mounted message”。这里是我的组件：

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. 

我不知道这是为什么，因为箭头的功能不应该是装箱，并且由于这是通过键入触发的，组件显然是挂载的。

感谢您的帮助！

---

下面是这个问题的先前版本：

我有一个非常标准的阵营应用程序，当我打电话this.setState()从 箭头的功能，我得到了“未安装组件消息”。

的代码看起来是这样的：

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 }你说 “这里是使用功能”。但是，它失去了它的背景。

在将它传递给属性之前，您需要将onClick()的上下文bind()。最好的地方是在你班上的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 }); }; 
} 

由于是在构造的背景下产生，它会隐含的约束。

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> 

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

希望它可以帮助你:)