state.findIndex不是findIndex的函数错误

Question

我id将对象作为action.payloadreducer传递给修改对象.

减速器:

const initialState = {
  posts: [
    {id:1, name:'post1', number:11},
    {id:2, name:'post2', number:22},
    {id:3, name:'post3', number:33}
  ]
}

export default function newData (state = initialState, action) {

  switch (action.type) {

    case "updateNumber": {

  // find object to update
    const index = state.findIndex(({ id }) => id == action.payload);

    if (index > -1 ) {
      const toIncrement = state[index];
      const number = toIncrement.number++;

      // create new object with existing data and newly incremented number
      const updatedData = { ...toIncrement, number };

      // return new array that replaces old object with incremented object at index
      return [...state.slice(0, index), updatedData, ...state.slice(index + 1)];
    }

      // return state if no object is found
      return state;
    }

  default:
    return state
  }
}

但我得到错误: state.findIndex is not a function.如何在posts数组中找到元素的索引？console.log动作告诉我按下的元素{type: "updateNumber", payload: 2}在哪里payload.

UPDATE1:

export default function newData (state = initialState, action) {

  switch (action.type) {

    case "updateNumber": {

  // find object to update
    const index = state.posts.findIndex(({ id }) => id == action.payload);

    if (index > -1 ) {
      const toIncrement = state.posts[index];
      const number = toIncrement.posts.number++;

      // create new object with existing data and newly incremented number
      const updatedData = { ...toIncrement, number };

      // return new array that replaces old object with incremented object at index
      return [...state.posts.slice(0, index), updatedData, ...state.posts.slice(index + 1)];
    }

      // return state if no object is found
      return state;
    }

  default:
    return state
  }
}

所以这应该返回在状态posts更新number,对吧？

Answer 1

你initialState是一个object.

我想你的意思

state.posts.findIndex(({ id }) => id == action.payload);  

或者也许更改initialState为

const initialState = [
    {id:1, name:'post1', number:11},
    {id:2, name:'post2', number:22},
    {id:3, name:'post3', number:33}
  ]

编辑
作为编辑的后续内容,
在您进行更改后,现在您可以执行以下操作:

const number = toIncrement.number++;

就像totalIncrement举例这样的对象一样:

{id:1, name:'post1', number:11}  

编辑#2
我认为你正在改变state不允许的内容redux.
尝试改变这个:

if (index > -1 ) {
      const toIncrement = state.posts[index];
      const number = toIncrement.posts.number++;  

对此:

if (index > -1 ) {
      const toIncrement = {...state.posts[index]};
      const number = toIncrement.posts.number + 1; // i hope this is a number and not a string!

另一件事,你的初始状态是一个对象,但你的reducer返回一个数组.
改变这一行:

// return new array that replaces old object with incremented object at index
      return [...state.posts.slice(0, index), updatedData, ...state.posts.slice(index + 1)];  

到这一行:

// return new array that replaces old object with incremented object at index
      return { posts: [...state.posts.slice(0, index), updatedData, ...state.posts.slice(index + 1)]};