Javascript React-Redux：concat到处于状态的数组时的无限循环？

因此，我试图将元素添加到已存储在状态中的数组中。我知道你不应该直接改变状态，所以我发现使用

concat

是最好的方法

然而，当我尝试这样做时，我得到了一个无限循环

reducer.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'…

e、 g:

• 设置

  start:state.start

  有效
• 设置

  start:state.start+“test”

  会导致无限循环

  testtesttest..

我不知道是什么导致了这种奇怪的行为。据我所知，状态只是通过创建一个新的状态来修改的，所以它无法反馈到自身

createReducer.js

export function createReducer(initialState, reducerMap) {
    return (state = initialState, action) => {
        const reducer = reducerMap[action.type];

        return reducer
            ? reducer(state, action.payload)
            : state;
    };
}

startAction.js

const START_PROCESS = 'START_PROCESS';
export function startProcess(data) {
  return {
    type : START_PROCESS,
    payload : {
      data : data //where data is a string
    }
  }
}

viewAction.js

...
export default ProcessView extends React.Component {
  render() { return <div>{this.props.actions.startProcess('string')}</div> }
}
export default connect(mapStateToProps,mapDispatchToProps)(ProcessView)

。。。
导出默认ProcessView扩展React.Component{
render（）{return{this.props.actions.startProcess（'string'）}
}
导出默认连接（MapStateTrops、mapDispatchToProps）（ProcessView）

避免状态突变的最佳方法肯定是使用。在您的情况下，我会说您可能认为您的操作是错误的。您确定它不是在render中调用的吗？

语法看起来是正确的。您如何调用

START\u PROCESS

操作？问题更新为完整跟踪

startAction

调用了什么？这是一个打字错误，意思是实际上，

startProcess

我想我看到了这个问题。如果我错了，请纠正我，因为

startProcess

是在渲染体中调用的，每次状态更改时都会调用它，导致无限循环？当您从渲染方法调用此操作时，它将更新状态并重新渲染视图。就像render->call action->reduce state->render->call action->…这就是它连接无限的原因。我会检查一下。而且这个动作确实是在一个呈现中调用的。你认为这可能导致了什么吗？是的，如果你在呈现中调用它，你将进入一个无限循环。因为每个动作都会调用它自己，因为每个动作都会导致页面被调用我再次渲染。