Реагировать не рендеринг нового состояния

Question

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

Вот мой код

import React, { useState, Fragment } from "react";

const Todo = () => {
  const [inputVal, setInput] = useState("");
  const [list, setList] = useState([]);
  const handleInput = e => {
    setInput(e.target.value);
  };
  const handleClick = () => {
    setList([...list, inputVal]);
    setInput("");
  };
  const handleDelete = index => {
    setList([...list.splice(index, 1)]);
    console.log(list);
  };
  const renderList = () =>
    list.map((item, index) => {
      return (
        <div key={index} onClick={() => handleDelete(index)}>
          {item}
        </div>
      );
    });
  return (
    <Fragment>
      <div>
        <input value={inputVal} onChange={handleInput} />
        <button onClick={handleClick}>submit</button>
      </div>
      <ul>{renderList()}</ul>
    </Fragment>
  );
};

export default Todo;

Answer 1

У вас есть две проблемы здесь.

1. array.splice мутирует и возвращает удаленные элементы. Когда вы запускаете

setList([...list.splice(index, 1)]);

Это удаляет один элемент из объекта list и затем вызывает setList([removed_item]).

Вы можете заменить эту строку на

setList(list.slice(0, index).concat(list.slice(index + 1))

В настоящее время происходит то, что вы устанавливаете состояние как тот же объект, что и раньше (но мутировал), поэтому он не запускает повторную визуализацию.

Вы неправильно используете атрибуты key. Вы можете прочитать документы здесь

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

Ваши ключи должны однозначно идентифицировать элементы списка задач, без ссылки на сам список. Текст в пункте является хорошим выбором, за исключением возможной проблемы неуникальности.

При повторном рендеринге списка задач React использует ключи, чтобы решить, какие дочерние элементы следует рендерить. Если вы используете индексы в качестве ключей, а затем удаляете элемент с индексом 0, то 0-му дочернему элементу не будет приказано перейти на новый 0-й элемент, поскольку он все еще получает тот же ключ.