state.findIndex 不是 findIndex 的函数错误

Question

我将对象的id 作为action.payload 传递给reducer 以修改对象。

减速机：

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 是按下的元素。

更新1：

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)]};