Удаление списка задач JSX без использования реквизитов или состояния

#javascript #reactjs #react-hooks #jsx

#javascript #reactjs #реагирующие хуки #jsx

Вопрос:

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

Кто-нибудь может показать мне, что я делаю не так?

Он отображается на странице, но ничего не делает и выдает ошибки на консоли.

 function Todolist() {
   const [todo, setTodo] = useState({desc:'', date:''});
   const [todos, setTodos] = useState([]);
   

   const inputChanged = (e) => {
       setTodo({...todo, [e.target.name]: e.target.value});
   }
   const addTodo = (event) => {
    event.preventDefault();
    setTodos([...todos, todo]);
}
 const handleRemove = () => {
    todos.filter((todo, i) => i !== index)
}
    return(
     <div>
         <label> Description:
            <input name="desc" value={todo.desc} onChange={inputChanged}></input>
         </label>
         <label> Date:
            <input type="date" name="date" value={todo.date} onChange={inputChanged}></input>
         </label>
         <button onClick={addTodo}>Add</button>
        <table>
            <tbody> 
               <tr><th >Date</th><th>Description</th></tr>
                {
                   todos.map((todo, index )=> 
                   <tr key={index}>
                       <td>{todo.date}</td>
                       <td>{todo.desc}</td>
                       <td><button onClick={handleRemove}>Delete</button></td>
                       </tr>
                       )
                }
            </tbody>
        </table>
     </div>
    );
}

export default Todolist ;

1. В какой-то момент этот подход потерпит неудачу. Вы должны отслеживать свои задачи по идентификатору uid, а не по индексу в массиве. medium.com/@robinpokorny /…

2. Есть ли какая-либо причина, по которой вы не хотите использовать реквизит или состояние? Это противоречит основному принципу React. React запускает повторную визуализацию, если изменяется либо реквизит, либо состояние (с использованием установщика состояния). Вы можете управлять списком элементов задач без обоих из них, но тогда представление не будет повторно отображаться. Это приводит к тому, что пользователь не может видеть никаких изменений.

3. О, я еще не был знаком с реквизитами и состоянием… Извините. Я скоро узнаю и попытаюсь их исправить!! Спасибо за предоставленную информацию!!

Ответ №1:

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

Чтение из .filter() документации:

filter() Метод создает новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.

Исходя из этого, вам необходимо присвоить возвращаемое значение .filter() with setToDos как:

 setTodos(prevToDos =>
   prevToDos.filter((todo, i) => i !== index)
)

И, вероятно, вам нужно перейти к handleRemove index тому, что вы используете в .filter() :

 <button onClick={() => handleRemove(index)}>Delete</button>

Также добавьте в список параметров определение этой функции:

 const handleRemove = (index) => { /* your function */ }