React Redux：如何在屏幕上动态呈现数据？

Question

我的应用有两个模型：用户模型和锦标赛模型。

使用 Redux，我有一个 Action/Reducer 配置，可以将用户对象作为数组添加到 Tournament 对象。所以一个锦标赛可以有一组用户（参与者）

在组件中，我有一个调用 redux 操作以将用户添加到锦标赛的函数

这是我的组件，包括将用户添加到锦标赛的功能，以及它在屏幕上的呈现方式。

class TournamentShow extends Component {
    constructor(props) {
        super(props);
        this.onSignUp = this.onSignUp.bind(this);
        this.state = {
            participants: []
        };
    };

    static propTypes = {
        tournament: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired
    };

    onSignUp(tournamentId, user) {
        this.props.addParticipant(tournamentId, user);
    };

    render() {
        const { _id, title, hostedBy, status, participants } = this.props.tournament.showTournament;
        const { isAuthenticated, user } = this.props.auth;
        return (
            <div>
                <h1>{ title }</h1>
                <h3> <TournamentDescription key={_id} title={ title } /> </h3>
                <p>Hosted by: { hostedBy }</p>
                <p>status: { status }</p>
                <p>Registered Fighters:</p>
                <ul>
                    {
                        participants && participants.map(participant => (
                            <li key={participant._id}>{participant.username}</li>
                        ))
                    }
                </ul>
                {
                    status === "Open" && isAuthenticated ?
                    <TournamentSignUp
                        participants={participants}
                        userId={user._id}
                        onClick={() => this.onSignUp(_id, user)} 
                    /> :
                    <Button block disabled>Log in to sign up for this tournament</Button>
                }
                <br/><Link to="/">Back to Tournaments main page</Link>
            </div>
        )
    }
};

const mapStateToProps = state => ({
    tournament: state.tournament,
    auth: state.auth
});

export default connect(mapStateToProps, { showTournament, addParticipant })(TournamentShow);

我在类组件中添加了 State，因为我认为我需要对它做点什么

它工作得很好。它将用户作为“参与者”添加到锦标赛中，但我必须刷新页面才能在屏幕上呈现。

有没有办法让 DOM 动态更新？

Answer 1

由于您可能省略了部分代码，我不确定您是否在课堂上使用过mapStateToProps。

mapStateToProps 的想法是，对列出的变量的任何更改都将强制重新渲染您的组件。

基本实现如下：

const mapStateToProps = state => ({ todos: state.todos })

对 redux 中 todos 变量的任何更改都会触发组件中的渲染。

您可以查看此文档以获取更多信息： https://react-redux.js.org/using-react-redux/connect-mapstate

---

您可能还想记下这个issue。这也可能是您的屏幕未动态更新的原因。如前一个问题的答案所述：

MapStateToProps 对每次返回的值进行浅比较。浅比较将比较对象和数组的引用。