使用 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 functionreducer1）我在我的项目中使用 redux reducer2）我通过在我的容器中传递来自我的调度的类型来更新状态3）我试图通过推送来更新数组（我知道它返回长度）但我想知道它为什么不起作用4）下面的代码我在javascript中尝试过一切正常var a = {b:[]}a.b.push(11)//output1

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;