React-Redux:当连接到处于状态的数组时无限循环
React-Redux: Infinite loop when concat to an array in state?
所以我正在尝试将元素添加到我存储在状态中的数组中。我知道你不应该直接改变状态,所以我发现使用concat
是最好的方法。
但是,当我尝试这样做时,我得到了一个无限循环。
减速机.js:
const initialState = {
name : null, //puzzle name
start : []
};
export default createReducer(initialState,{
[START_PROCESS]: (state,payload) => {
return Object.assign({},state,{
start : state.start.concat(['test']);
})
}
});
结果是['test','test','test','test'...
例如:
- 设置
start: state.start
工作 - 设置
start: state.start + 'test'
会导致testtesttest..
的无限循环
我不知道是什么导致了这种奇怪的行为。据我所知,状态只能通过创建新状态来修改,因此它无法反馈到自身。
创建减速器.js
export function createReducer(initialState, reducerMap) {
return (state = initialState, action) => {
const reducer = reducerMap[action.type];
return reducer
? reducer(state, action.payload)
: state;
};
}
启动操作.js
const START_PROCESS = 'START_PROCESS';
export function startProcess(data) {
return {
type : START_PROCESS,
payload : {
data : data //where data is a string
}
}
}
视图操作.js
...
export default ProcessView extends React.Component {
render() { return <div>{this.props.actions.startProcess('string')}</div> }
}
export default connect(mapStateToProps,mapDispatchToProps)(ProcessView)
避免状态突变的最好方法肯定是使用ImmutableJS。在你的情况下,我会说也许你说你的行为是错误的。你确定它没有在渲染中调用吗?
相关文章:
- 从组件状态的数组中删除元素
- 如何在React中更改处于状态的数组
- ReactJS-这个状态中的数组在删除时被正确更新,但结果是't,直到以后的状态发生变化
- 从数组中删除元素,然后保留其状态以备将来使用,而不使用全局变量
- 如何使用Handlebars.js按状态拆分对象数组
- 如何从状态数组中删除项目
- React-Redux:当连接到处于状态的数组时无限循环
- 在 ReactJs 状态上将项目添加到数组中,并超时以进行自我删除
- 从 0 和 1 的数组恢复复选框的状态
- 如何推送到实际对象的数组最后状态,清除它并像新对象一样单独编辑
- 反应 redux 与给定数组的合并状态
- 将状态的数组长度设置为 0,但绑定列表仍剩下一个元素
- 在闭包中公开数组的状态,而不允许从外部对其进行编辑
- ReactJs-如何更新数组中的状态
- 更新 ReactJS 状态数组
- react.js在改变状态数组后不更新DOM
- ReactJS在状态数组中更新单个对象
- 尝试从状态数组从索引进行拼接,但最终从第一个索引拼接到最后一个索引
- 在动态的悬停状态数组中写入鼠标离开状态
- 序列化JavaScript CanvasRenderingContext2D状态数组