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

Question

假设我有一个链接，当单击该链接时，会向我的状态对象中名为 的数组添加一个随机数queue。整个 state.queue 数组显示在我的页面上，并在我们单击链接时更新。我目前有一个应该做类似事情的链接，但是在我的减速器更改状态（向数组中添加一个新项目）之后，我的页面没有（重新？）渲染我的组件，因此页面不会更新.我应该怎么做才能在我的页面上显示整个 state.queue，包括在我单击链接时动态更新？这是我所拥有的：频道.jsclass 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.jsexport 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) {

    const{queue} = state

    return {queue}

}

Channel 组件将获得一个名为 queue的道具，您可以通过它与它进行交互。道具.队列。

因此，修复方法是更新 Channel 以与道具交互。您很可能想要删除 this.state.queue，因为它似乎没有任何用途，并且因其名称而引起混淆。

{this.props.queue && 

  this.props.queue.length > 0 &&

    <div>

      <ul>

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

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

        )}

      </ul>

    </div>

  }

此外，您设置根减速器的方式使您的 redux 状态看起来像这样：

{

  reducer1: {}, // not sure what this contains, since reducer 1 was omitted

  reducer2: {

    queue: [],

  }

}

因此，如果这确实是您希望 redux 状态的样子，那么您的道具映射状态将需要更新为：

function mapStateToProps(state) {

    const {queue} = state.reducer2;

    return {queue};

}

Answer 2

除了所有关于更改this.state.queue为的响应之外this.props.queue，我还需要做一些事情。在我的初始化队列reducer2：

function reducer2(state = {queue:[]}, action) {

    switch (action.type) {

        case QUEUE_NEW_REQUEST:

            return {

                ...state,

                queue: [...state.queue,action.payload],

            }

        default:

            return state

    }

}

更改mapStateToProps在Channel.js：

function mapStateToProps(state) {

    const{queue} = state.reducer2

    return {queue}

}