1

我有一个初始数组，可以添加和删除，那里没有问题..

const initialItems = [
    {
        id: Date.now(),
        text: 'Get milk',
    },
    {
        id: Date.now(),
        text: 'Get eggs',
    },
]

..但我试图弄清楚如何使用调度功能有效地编辑其中一项的文本。

我的调度看起来像这样：

const editItemHandler = () => {
    dispatch({
        type: 'EDIT_ITEM',
        id: Date.now(),
        text: itemInputRef.current.value,
        index,
    })
}

这只是传递输入的值

<input
    autoFocus
    type='text'
    ref={itemInputRef}
    onKeyDown={(e) => {
        if (e.key === 'Escape') {
            setToggle(!toggle)
        }
        if (e.key === 'Enter') {
            // Dispatch
            editItemHandler()
            setToggle(!toggle)
        }
    }}
/>

我的减速器文件如下所示：

const itemReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_ITEM': {
            return [
                ...state,
                {
                    id: action.id,
                    text: action.text,
                },
            ]
        }
        case 'EDIT_ITEM': {
            // Attempt 1
            return [...state.splice((item, index) => index, 1, action.text)]
            // Attempt 2
            return [
                ...state.filter((item, index) => index !== action.index),
                {
                    id: action.id,
                    text: action.text,
                },
           ]
        }
        case 'DELETE_ITEM': {
            return [...state.filter((item, index) => index !== action.index)]
        }
        default: {
            return state
        }
    }
}

export default itemReducer

我已经在 'EDIT_ITEM' 类型中尝试过 2 种方法进行了评论。

方法 1 只是删除该项目并添加一个新的值，尽管它位于数组的底部，这不是我想要的，所以我必须尝试重新排序。

方法 2 是使用拼接，我认为这可以用于替换具有指定值的项目。然而，它返回的只是原始文本的“编辑”（因此甚至没有编辑），并删除了其他所有内容。

我如何错误地使用此功能，还是有更好的方法来编辑项目？我显然做错了什么，但不知道是什么。我搜索并尝试了各种方法均无济于事。

理想情况下，我希望该项目也保持与以前相同的 ID，因此如何保持这一点将是一个加号。

4

1 回答 1

0

要更新数组中的项目，您有多种选择：

case 'EDIT_ITEM': {
    // using map
    return state.map((item, i) => 
                    i === action.index ? { id: action.id, text: action.text } : item
    // using slice
    return [
      ...state.slice(0, action.index),
      { id: action.id, text: action.text },
      ...state.slice(action.index+1)
    ]

这是不正确的使用splice

return [...state.splice((item, index) => index, 1, action.text)]

因为splice返回一个包含已删除元素的数组，并且它不接受函数作为第一个参数，而是开始更改数组的索引。

正确的拼接方法：

case 'EDIT_ITEM': {
    // using splice
    let newState = [ ...state ]
    newState.splice(action.index, 1, { id: action.id, text: action.text })
    // or you can directly do
    newState[action.index] = { id: action.id, text: action.text }
    // and return the new state
    return newState;
于 2019-12-14T17:41:00.547 回答