this.setState给出错误

Question

我正在研究一个非常简单的反应应用程序。它有一个组件，在这个组件中，我试图在链接点击时设置状态。但由于某种原因，setState甚至没有得到认可。它有下划线表示未解析的函数或方法setState（）。我不知道为什么它没有得到认可。这是我第一次尝试在此应用程序中使用setState。

facet_wrap()

Answer 1

错误是因为这段代码：

const mapDispatchToProps = dispatch => bindActionCreators({
    toTriviaPage: () => {
        this.setState({activePanel:"trivia"})
        push('/trivia')
    }, dispatch)

内部toTriviaPage setState将无法使用。

要解决这个问题，你可以做一件事，在组件内部创建一个局部函数，然后调用props函数，然后执行其他操作。

像这样：

onClick={() => this.localFunction()}

localFunction(){
    this.setState({activePanel:"trivia"}, () => {
        this.props.toTriviaPage();
    })
}

Answer 2

您正在尝试在类的上下文之外使用setState。该错误不在toImagePage方法中。

错误在mapDispatchToProps函数中。你不能在那里使用setState。

将toTriviaPage移至您的组件并绑定此上下文或使用箭头函数。

connect的mapDispatchToProps参数用于调度您不执行的redux操作。

toTriviaPage = () => {
    this.setState({ activePanel: "image" });
    push('/trivia');
}

Answer 3

除非使用箭头函数，否则您需要将方法绑定到构造函数。

this.toImagePage = this.toImagePage.bind(this)

Answer 4

在类上的方法上使用箭头函数被认为是最佳实践，因为您不会更改this的上下文。当您不使用箭头函数时，this的范围仅限于该方法，这就是您必须绑定它的原因。

正如其他答案中所述，您必须绑定它，或使用箭头功能。