Некоторая неправильная / призрачная визуализация при удалении дублированного индекса из массива списка задач - PullRequest
Новая
       22

Некоторая неправильная / призрачная визуализация при удалении дублированного индекса из массива списка задач

0 голосов
/ 28 мая 2019

Я оборачиваюсь по поводу проблемы, связанной с массивом списков задач, удалением элемента и неправильным отображением элемента перерисовки Я использую реагирующий крючок и тестирую немного вещей. Я хотел проверить, что произойдет, если 2 элемента списка получат одинаковый идентификатор, и я хочу удалить их.

Контекст: получил список, добавив элемент с индексной базой длины списка (цель тестирования), удалив один и добавив новый элемент (чтобы 2 элемента получили одинаковый индекс). Попытка удалить элементы и посмотреть, что происходит

  1. Используя useState, я получил старый список предметов, которые снова появляются. Я полагаю, что состояние плохо переписано, потому что при удалении элемента снова появляется предыдущий список элементов.

  2. Использование useReducer (для проверки использования в чистом состоянии). Но элемент удаления неправильного индекса не будет удален из списка (реагируйте, не создавайте пустой список)

Я загрузил вторую версию на https://dp -test-app.depstep.now.sh / todo

Я попытался поиграть с массивом клонирования, чтобы создать новый указатель и еще ... но ничего не изменилось

Вопросы:

  • Почему состояние с useState действительно не обновляется, если элемент снова появляется в списке, когда я пытаюсь удалить снова?
  • Почему существует этот "призрачный" предмет, который не будет перерисован?

С использованиемState

  • добавление второго элемента,
  • третий пункт,
  • четвертый пункт,
  • удаление пункта 2,
  • добавление еще одного элемента (таким образом, 2 элемента получат одинаковый индекс)
  • повторное удаление элемента 2 (неправильный рендер)
  • удаление элемента 2 (ничего не происходит)
  • удаление элемента 3 (последний элемент исчезает)
  • удаление элемента 2 (последний элемент снова появляется) ... Может зацикливаться с этим
  • Если удалить первый элемент, этот элемент исчезнет
  • если снова удалить элемент 1er, снова появится «первый» элемент ..

https://media.giphy.com/media/VhQHKUNpYKBFDflp0M/giphy.gif

Надеюсь, что тихо ясно :-D

Вот немного кода:

Редуктор: 

const todoListReducer = (state, action) => {
    console.log('state', state)
    console.log('action', action)
    switch (action.type) {
        case 'ADD':
            return state.concat(action.payload)
        case 'REMOVE':
            const filteredTodoList = state.filter((todo) => todo.id !== action.payload)
            console.log('filteredTodoList', filteredTodoList)
            return filteredTodoList
        default:
            return state
    }
}
    const [todoList, setTodoList] = useState([{ id: 1, value: 'first' }])
    // const [todoList, dispatch] = useReducer(todoListReducer, [{ id: 1, value: 'test' }])

Добавить товар: 

    const addTodoItemHandler = () => {
        const newItem = { id: todoList.length + 1, value: todoName }
        // dispatch({ type: 'ADD', payload: newItem })
        setTodoList(todoList.concat(newItem))
    }

Удалить позицию: 

const deleteTodoItemHandler = (itemId) => {
        // useReducer
        dispatch({ type: 'REMOVE', payload: itemId })
        return
        // useState
        const updatedTodoList = [...todoList]
        const filteredTodoList = updatedTodoList.filter((todo) => todo.id !== itemId)
        setTodoList(filteredTodoList)
    }

Полагаю, это происходит из-за того, что дублированный индекс не понятен действием повторного рендеринга (я называю его призраком) и добавление нового элемента отобразит его после этого «призрака»

Заранее спасибо

...