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

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的{{1}}，对吗？

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

state.findIndex不是findIndex的函数错误

1 个答案: