reactjs - 对按钮做出反应的 onClick 函数只能触发一次

Question

我有一个 onClick 函数可以更改类名的状态，因此可以显示和隐藏我拥有的一些样式。该按钮在第一次单击时工作正常，但之后无法再次单击。

如下所示，我的组件连接到我的 redux 商店。我创建了 handleClick 函数来调用我在操作中显示的 actionCreator。我希望 onClick 函数在每次单击时触发，并将处于我状态的单击更改为与以前相反的状态。我是否错过了在某处使用以前的状态？当我应该复制状态时，我是否直接改变了我的状态？无论如何，希望这个问题是有道理的。

编辑：我发现当我单击按钮时，单击状态保持不变，不知道为什么它没有切换。

class BackDrop extends React.Component {

    handleClick = () => {
        this.props.projectClick();
    };
    render() {
        console.log(this.props);
    return (
        <div className={this.props.click ? 'backdrop-click' : 'backdrop'}>
            <button className="btn-click" onClick={()=> {this.handleClick()}}>
                {this.props.click ? 'Back' : 'View Projects'}
            </button>
            <ProjectDisplay
                click={this.props.click}
            />
        </div>
        )
    }
}
const mapStatetoProps = (state) => {
    return state;
};


export default connect(mapStatetoProps, actionCreators)(BackDrop);

//Reducer

const initialState = {
    click: false,
};

const mainReducer = (state = initialState, action) => {
    switch(action.type) {
        case "PROJECT_CLICK":
            return {
                ...state,
                click: !action.click,
            };
        default:
            return {
                ...state,
            }
    }
};

export default mainReducer;

//Action

export function projectClick(click) {
    return {
        type: "PROJECT_CLICK",
        click,
    }
}

Answer 1

原来click: !action.click我应该做的时候用过click: !state.click