javascript - state.findIndex is not a function 错误与 findIndex

Question

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

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 不是函数。如何找到 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
  }
}

所以这应该返回状态中更新了 number 的 posts，对吗？

Answer 1

您的initialState 是一个对象。

我想你的意思是

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