Question

我正在与React-Redux一起迈出第一步。我在管理国家时遇到了麻烦。

一切都按预期工作。我有一个onClick触发动作调度程序（FetchUserAction）的按钮。此操作执行HTTP请求。 Reducer使用数据并修改商店。我正在调试，看到在连接功能上状态（与数据）进展顺利。

我的理解是当状态被修改时，组件将调用render方法。那就发生了！真正的问题是，我希望当我将新数据通过prop传递给子组件时，我会看到它，但这种情况并没有发生。我做错了什么？

＆＃13;

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);

＆＃13;

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>
        );
    }
}

＆＃13;

import { FETCH_USERS } from "../actions/index";

export default function(state = [], action) {
    switch (action.type) {
        case FETCH_USERS:
            return [action.payload.data, ...state];
    }
    return state;
}

＆＃13;

Answer 1

您的<UserList />呈现正在查看呈现内容的内部状态。你需要它才能看到道具才能发挥作用。

renderUsersTable() {

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

将此行修改为引用props以及{ this.state.users.length > 0 ? this.renderUsersTable() : null}

旁注：您可以将<UserList />转换为stateless functional component并摆脱课程开销。

React-Redux / Child组件不重新渲染

1 个答案: