组件在减速器中的状态更改后不会重新渲染

Question

假设我有一个链接，当单击该链接时，会向我的状态对象中名为 的数组添加一个随机数queue。整个 state.queue 数组显示在我的页面上，并在我们单击链接时更新。我目前有一个应该做类似事情的链接，但是在我的减速器更改状态（向数组中添加一个新项目）之后，我的页面没有（重新？）渲染我的组件，因此页面不会更新.

我应该怎么做才能在我的页面上显示整个 state.queue，包括在我单击链接时动态更新？这是我所拥有的：

频道.js

class Channel extends Component {

    constructor(props) {

        super(props);

        this.state = {

            queue: [],

            // more initializations

        };

      ...

    }

    ...

    render() {  

        return (

            <div>

            {/*This part is never called because this.state.queue never has anything in it! */}

             {this.state.queue && 

                this.state.queue.length > 0 &&

                    <div>

                        <ul>

                            {this.state.queue.map((queuedItem, i) =>

                                <li key={i}>{queuedItem}</li>

                            )}

                        </ul>

                    </div>}

                <div>

                    <QResults

                        allQueryResults={this.state.queryState}

                        requestHandler={queueNewRequest}

                    />

                </div>

            </div>

        );

    }

}

function mapStateToProps(state) {

    const{queue} = state

    return {queue}

}

 function mapDispatchToProps(dispatch) {

    return ({

        queueNewRequest: (newRequestData) => { dispatch({type: newRequestData}) }

    })

} 

export default withRouter(connect(mapStateToProps , mapDispatchToProps )(Channel))

QResults.js

export default class QResults extends Component {

    render() {

        const {requestHandler} = this.props

        return (

            <ul>

                {this.props.allQueryResults.items.map((trackAlbum, i) =>

                    <li key={i}>

                        <a href='#' 

                        onClick={

                            () => requestHandler(trackAlbum.name)}>

                            Some link

                        </a>

                    </li>

                )}

            </ul>

        )

    }

}

Answer 1

this.state.queue指的是Channel组件本地的状态。它不是 redux 状态。您初始化this.state.queue为一个空数组，然后您永远不会更改它（即，您永远不会调用this.setState）。如果你想与 redux 中的状态交互，那就是 mapStateToProps 的用武之地。 因为你有一个看起来像这样的 mapStateToProps：function mapStateToProps(state) {&nbsp; &nbsp; const{queue} = state&nbsp; &nbsp; return {queue}}Channel 组件将获得一个名为 queue的道具，您可以通过它与它进行交互。道具.队列。因此，修复方法是更新 Channel 以与道具交互。您很可能想要删除 this.state.queue，因为它似乎没有任何用途，并且因其名称而引起混淆。{this.props.queue &&&nbsp;&nbsp; this.props.queue.length > 0 &&&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.queue.map((queuedItem, i) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={i}>{queuedItem}</li>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; }此外，您设置根减速器的方式使您的 redux 状态看起来像这样：{&nbsp; reducer1: {}, // not sure what this contains, since reducer 1 was omitted&nbsp; reducer2: {&nbsp; &nbsp; queue: [],&nbsp; }}因此，如果这确实是您希望 redux 状态的样子，那么您的道具映射状态将需要更新为：function mapStateToProps(state) {&nbsp; &nbsp; const {queue} = state.reducer2;&nbsp; &nbsp; return {queue};}

Answer 2

除了所有关于更改this.state.queue为的响应之外this.props.queue，我还需要做一些事情。在我的初始化队列reducer2：function reducer2(state = {queue:[]}, action) {&nbsp; &nbsp; switch (action.type) {&nbsp; &nbsp; &nbsp; &nbsp; case QUEUE_NEW_REQUEST:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...state,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; queue: [...state.queue,action.payload],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return state&nbsp; &nbsp; }}更改mapStateToProps在Channel.js：function mapStateToProps(state) {&nbsp; &nbsp; const{queue} = state.reducer2&nbsp; &nbsp; return {queue}}