Question

我是redux的新手，我正在尝试使组件具有反应性。当我从父mapStateToProps传递过来的道具发生变化并且无法正常工作时，我想重新渲染MoveList组件。

我尝试将密钥提供给移动列表组件，但是它没有用，我不确定是否还有其他方法

父组件：

    async componentDidMount() {
        this.loadContact();
        this.loadUser();
    }

    loadContact() {
        const id = this.props.match.params.id;
        this.props.loadContactById(id);
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.match.params.id !== this.props.match.params.id) {
            this.loadContact();
        }
    }

    transferCoins = (amount) => {
        const { contact } = this.props
        console.log('amount', amount);

        this.props.addMove(contact, amount)
        console.log(this.props.user);

    }

    get filteredMoves() {
        const moves = this.props.user.moves
        return moves.filter(move => move.toId === this.props.contact._id)
    }


    render() {
        const { user } = this.props;
        const title = (contact) ? 'Your Moves:' : ''


        if (!user) {
            return <div> <img src={loadingSvg} /></div>;
        }

        return (
            <div className="conact-deatils">
                { <MoveList className="move-list-cmp" title={title} moveList={this.props.user.moves} />}
            </div>
        )
    }
}

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

const mapDispatchToProps = {
    loadContactById,
    saveContact,
    addMove
};

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

子组件：moveList

export const MoveList = (props) => {    
    return (

        <div className="moves-list">
        <div className="title">{props.title}</div>
        <hr/>
            {props.moveList.map(move => {
                return (
                    <ul className="move" key={move._id}>
                        {props.isFullList && <li>Name: {move.to}</li>}
                        <li>Amount: {move.amount}</li>
                    </ul>
                )
            })}
        </div>
    )
}

Answer 1

最后，问题是当我调用addMove调度时，父组件没有重新渲染。我没有深度复制moves对象的数组，并且做出反应不知道是否需要重新渲染组件。我制作了一个JSON.parse（JSON.stringify深层副本和该组件。

React-Redux：在父更改中重新渲染mapStateToProps上的子组件不起作用

1 个答案: