动作方法未调用

Question

我正在尝试使一个简单的react-redux应用程序正常工作，但遇到一个奇怪的错误，我无法弄清。我试图简单地更新当前用户的状态并处理商店，但它不起作用。 changeUserStatus没有被调用

setCurrentUserFirstName-可以使用setCurrentUserHandle-不能

export const changeUserStatus = (userid,status) => async (dispatch, getState, { getFirebase }) => {
  const firebase = getFirebase()
  const databaseRef = firebase.database().ref()
  const statusRef = databaseRef.child("users").child(userid).child("user_status")
  statusRef.set(status).then(() => {
    dispatch({ type: 'CHANGE_USER_STATUS' });
  });
}

// home.js文件

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'
import { compose } from 'redux'
import { Redirect } from 'react-router-dom'
import {changeUserStatus} from '../../store/actions/userActions'

class Users extends Component {

    handleAcceptClickEvent1 =(e) =>{
        console.log("accepted");
        const { userid, status } = this.props;
        changeUserStatus(e.target.name,"accepted");
    }

    handleRejectClickEvent1 =(e) =>{
        console.log("rejected");

        const { userid, status } = this.props;
        changeUserStatus(e.target.name,"rejected");
    }

    reject =(e) =>{
        console.log("rejected");
        const { userid, status } = this.props;
        this.props.changeUserStatus(userid=e.target.name,status="rejected");
    }

    UserCard = ({user}) =>{

        const status = user.user_status;
         let acceptComponent;
         let rejectComponent;

            if (status == "pending"){
                acceptComponent = <td><button type="button" class="btn btn-success green" name ={user.user_id} onClick={this.handleAcceptClickEvent1}>Accept</button></td>
                rejectComponent = <td><button type="button" class="btn btn-danger red" name ={user.user_id} onClick={this.handleRejectClickEvent1}>Reject</button></td>
            }
            else if(status == "accepted"){
                acceptComponent = <td>Accepted</td>
                rejectComponent = <td></td>
            }
            else{
                acceptComponent = <td></td>
                rejectComponent = <td>Rejected</td>
            }

        return (
            <tr>
                <th scope="row">{user.user_id}</th>
                <td>{user.company_name}</td>
                <td>{user.email}</td>
                {acceptComponent}
                {rejectComponent}
            </tr>
            )
    }

    render() {
        const { users, auth } = this.props;
        if (!auth.uid) return <Redirect to='/login' />
        console.log(users);
        return (
            <div className="dashboard container">
                <div className="row">
                    <div className="project-list section">
                        <div>
                            <p>Users</p>
                        </div>

                        <table className="table table-striped table-bordered" style={{ width: "100%" }}>
                            <thead>
                                <tr>
                                    <th scope="col">User Id</th>
                                    <th scope="col">Company Name</th>
                                    <th scope="col">Email</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {users && users.map(user => {
                                    return <this.UserCard user={user.value} key={user.value.id} />
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        users: state.firebase.ordered.users,
        auth: state.firebase.auth
    }
}

const mapDispatchToProps = (dispatch) => {
    return{
        changeUserStatus: (userid,status) => dispatch(changeUserStatus(userid,status))
    }
}


export default compose(
    connect(mapStateToProps),
    firebaseConnect({ users: 'users' })
)(Users);

Answer 1

对此进行检查并

export default compose(
   connect(mapStateToProps,mapDispatchToProps),
   firebaseConnect({ users: 'users' })
)(Users);