使用 redux 更新状态时推送反应的工作

Question

以下代码是我在容器中调用这些函数的减速器的代码

const intialState = {

  counter: 0,

  results: []

};

const reducer = (state = intialState, action) => {

  switch (action.type) {

    case "INCREMENT":

      return {

        ...state,

        counter: state.counter + 1

      };

    case "STORE_RESULT": {

      return {

        ...state,

        results: state.results.push(state.counter)

      };

    }

  }

  return state;

};

export default reducer;

我收到以下错误

TypeError: state.results.push is not a function

reducer

1）我在我的项目中使用 redux reducer

2）我通过在我的容器中传递来自我的调度的类型来更新状态

3）我试图通过推送来更新数组（我知道它返回长度）但我想知道它为什么不起作用

4）下面的代码我在javascript中尝试过一切正常

var a = {

b:[]

}

a.b.push(11)

//output

1

Answer 1

push返回新length的 mutated array。使用concat，而不是返回一个新的数组results : state.results.concat(item)让我们假设以下代码results : state.results.push('foo')假设 results有一个lengthof 5，上面的代码将断言results : 5下次您尝试push results这样做时，您的编译器会是什么样子5.push('foo')

Answer 2

返回值的.push就是调用方法的对象的新长度属性。添加值以stae.results使用concat或spread 语法：case "STORE_RESULT": {  return {    ...state,    results: [...state.results, state.counter]  };}

Answer 3

您应该在减速器开关中添加默认情况。并使用[...state.results, state.counter]代替state.results.push(state.counter)。像这样const intialState = {  counter: 0,  results: []};const reducer = (state = intialState, action) => {  switch (action.type) {    case "INCREMENT":      return {        ...state,        counter: state.counter + 1      };    case "STORE_RESULT": {      return {        ...state,        results: [...state.results, state.counter] // here      };    default:      return state; // here    }  }};export default reducer;