在reducer中更改状态后，组件不会重新呈现
假设我有一个链接，当单击它时，会将一个随机数添加到我的状态对象queue中的数组中。整个state.queue数组都会显示在我的页面上，并在我们单击链接时更新。我目前有一个链接，它应该做一些类似的事情，但是在我的reducer改变了状态(向数组中添加了一个新项)之后，我的页面不会(重新？)呈现我的组件，所以页面不会更新。
我应该怎么做才能在我的页面上显示整个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回答 3
Stack Overflow用户
发布于 2019-05-27 00:52:14
this.state.queue指的是Channel组件的本地状态。它不是redux状态。您将this.state.queue初始化为一个空数组，然后再也不会更改它(例如，您永远不会调用this.setState)。
如果你想在redux中与状态交互，这就是mapStateToProps的用武之地。因为你有一个看起来像这样的mapStateToProps：
function mapStateToProps(state) {
const{queue} = state
return {queue}
}通道组件将获得一个名为的队列属性，您可以通过this.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>
}此外，您设置root reducer的方式使您的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};
}Stack Overflow用户
发布于 2019-05-27 01:05:24
一旦您使用connect将state对象连接到props，您将在props中获得返回的对象。看看这个：https://react-redux.js.org/using-react-redux/connect-mapstate#return。
因此，您只需在Channel.js文件中将this.state.queue更改为this.props.queue。
并且您的组件不会呈现，因为它不依赖于更改后的props。因此，执行上述建议的更改应该可以解决问题。
Stack Overflow用户
发布于 2019-05-27 01:38:45
除了所有关于将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}
}https://stackoverflow.com/questions/56315519
复制相似问题