Question

比方说，我有一个链接，当单击该链接时，会将一个随机数添加到状态对象中名为queue的数组中。整个state.queue数组显示在我的页面上，并在我们单击链接时更新。我当前有一个链接，该链接应该做类似的事情，但是在我的化简器更改状态（向数组中添加新项）后，我的页面没有（重新？）呈现我的组件，因此该页面不会更新。

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

Channel.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>
        )
    }
}

actions.js

export const QUEUE_NEW_REQUEST = 'QUEUE_NEW_REQUEST'

export function queueNewRequest(newRequestInfo) {
    return dispatch => {
        dispatch({
            type: QUEUE_NEW_REQUEST,
            payload: newRequestInfo
        })
    }
}

reducers.js

import { combineReducers } from 'redux'

function reducer1(state = {}, action) {
    ...
}

function reducer2(state = {}, action) {
    switch (action.type) {
        case QUEUE_NEW_REQUEST:
             return {
                ...state,
                /*queue: [...state.queue,action.payload],*/ //compiler complains that 'TypeError: state.queue is not iterable'
                queue:[action.payload]
            } 
        default:
            return state
    }
}
const rootReducer = combineReducers({
    reducer1,
    reducer2
})

export default rootReducer

Answer 1

将state对象与props连接到connect后，您将在props中获得返回的对象。参见：https://react-redux.js.org/using-react-redux/connect-mapstate#return。

因此，您只需要在this.state.queue文件中将this.props.queue更改为Channel.js。

您的组件未呈现，因为它不依赖于更改后的props。因此，进行上述更改应该可以解决问题。

Answer 2

this.state.queue指Channel组件本地的状态。它不是redux状态。您将this.state.queue初始化为一个空数组，然后再不对其进行更改（即，您从不调用this.setState）。

如果您想与Redux中的状态进行交互，那就是mapStateToProps进入的地方。由于您有一个如下所示的mapStateToProps：

function mapStateToProps(state) {
    const{queue} = state
    return {queue}
}

Channel组件将获得一个 prop 命名队列，您可以通过此队列进行交互。 props .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状态，那么您需要将对应于props的地图状态更新为：

function mapStateToProps(state) {
    const {queue} = state.reducer2;
    return {queue};
}

Answer 3

除了将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
    }
}

在 Channel.js 中更改mapStateToProps：

function mapStateToProps(state) {
    const{queue} = state.reducer2
    return {queue}
}

Reducer中的状态更改后，组件未重新渲染

3 个答案: