问React-Redux /子组件不重新渲染

EN

class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            users: []
        };
        this.onButtonUserClick = this.onButtonUserClick.bind(this);
    }


    onButtonUserClick(){
        this.props.fetchUser();
    }

    render() {
        return (
                <div className={styles.home}>
                    <FetchUsersButton
                        fetchUsers={this.onButtonUserClick}/>
                    <UsersTable
                        users={this.props.users}/>
                </div>
        );
    }

}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchUser }, dispatch);
}

const mapStateToProps = (state) => {
    return {
        users: state.users
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

import React, {Component} from 'react';
import {Table, Thead, TBody, Td, Th, Tr} from 'reactable';

import styles from './index.css';

export default class UsersTable extends Component{

    constructor(props){
            super(props);
            this.state = {
                users: props.users
            };
            this.renderUsersTable = this.renderUsersTable.bind(this);
    }

    renderUsersTable() {
        return this.state.users.map(user => {
            return (
                <Tr key={user}>
                    <Td column="steamId">
                        {user.steam_id_64}
                    </Td>
                    <Td column="invited">
                        Yes
                    </Td>
                </Tr>
            );
        });
    }

    render(){
        return(
            <Table className={`table ${styles.usersTable}`}>
                    <Thead>
                    <Th column="steamId">
                            <strong className="name-header">SteamID</strong>
                    </Th>
                    <Th column="invited">
                            <strong>Invited</strong>
                    </Th>
                    </Thead>
                    { this.state.users.length > 0 ? this.renderUsersTable() : null}
            </Table>
        );
    }
}

import { FETCH_USERS } from "../actions/index";

export default function(state = [], action) {
    switch (action.type) {
        case FETCH_USERS:
            return [action.payload.data, ...state];
    }
    return state;
}