javascript - this.setState 报错

Question

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

import React, { Component } from 'react';
import { push } from 'react-router-redux'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

const styles = require('./sidebar.css');

class MenuPanel extends Component {

   constructor(){
       super();
       this.state = {
           activePanel: "trivia"
       }
   }

    toImagePage(){
       this.setState({activePanel:"image"})
        console.log("hey")
    }

    render() {
        return (
            <div>
                <div className="navbar-side">
                    <div className="tessact-logo"></div>
                    <div className="navbar-item active" onClick={() => this.props.toTriviaPage()}>
                        <a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
                    </div>
                    <div className="navbar-item" onClick={() => this.toImagePage()}>
                        <a className="navbar-item-link"><span className="fa fa-picture-o"></span> IMAGES</a>
                        <div className="navbar-item-inside">
                            <a className="navbar-item-inside-link">PERSONSS</a>
                            <a className="navbar-item-inside-link">BRANDS</a>
                            <a className="navbar-item-inside-link">OBJECTS</a>
                        </div>
                    </div>
                    <div className="navbar-item">
                        <a className="navbar-item-link"><span className="fa fa-tags"></span> KEYWORDS</a>
                    </div>
                </div>
            </div>

        );
    }
}


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


export default connect(
    null,
    mapDispatchToProps
)(MenuPanel)

Answer 1

错误是因为这段代码:

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

toTriviaPage 内的 setState 将不可用。

要解决这个问题，你可以做一件事，在组件内部创建一个本地函数，在里面做 setState，然后调用 props 函数并执行另一个操作。

像这样:

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

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