如果项目在javascript对象中，如何将项目推入数组[state.lastValue.push不是函数]

Question

我正在javascript object内的reducer reactjs更新一些值，如下所示。

这是更新前的对象

state = {
  result:1,
  lastval: []
}

这就是我要更新它的方式，

state = {
      ...state,
      result:state.result + 400,
      lastval: result.lastval.push(20)
    }

所以这给了我state.lastValue.push is not a function的错误。但如果我这样做就好了，

state = {
          ...state,
          result:state.result + 400,
        };
        state.lastval.push(20);

这很好。是什么原因。

Answer 1

像

一样更新你的状态

state = {
  ...state,
  result:state.result + 400,
  lastval: [...state.lastval, 20]
}

lastval: [...state.lastval, 20]将构造state.lastval数组中的所有内容并将20添加到其中并再次将其包装在数组中。

有关[...state.lastval]阅读What is the meaning of this syntax "{...x}" in Reactjs

的更多信息

Answer 2

原因是，当你写：

state = {
   ...state,
   result:state.result + 400,
   lastval: result.lastval.push(20)
}

州的最终状态将是：

state = {
   ...state,
   result:  some value
   lastval: 20
}

表示 state.lasteval将变为数字，它不会是array，因为 a.push（1）不会返回最终数组 ，它会将推送到array的项目返回。

像这样写它来更新状态：

state = {
   ...state,
   result: state.result + 400,
   lastval: [...state.lastval, 20]
}

检查此代码段：

let a = [1,2];

let b = [];

b = a.push(3);

console.log('a', a);

console.log('b', b);