Блог

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

   34 | {
  35 | todos amp;amp; todos.map((todo) => ([
  36 |   <p key={todo._id} >{todo.content}</p>,
> 37 |   <button key={i  }  id="del"  onClick={() => {this.handleClick(todo._id)}}/>
  38 | ]
  39 | ))
  40 | }
 

Мой handleClick выглядит следующим образом:

 useEffect(() => {
const handleClick = (todo_id) => {
  const delTodo = async () => {
    const del = await Axios.delete('http://localhost:3001/todo/'   todo_id)
    .then(() => {
      console.log('deletado!!')
    })
  }
}
}, [])
 

используйте handleClick вместо this.handleClick .Потому что функционального компонента нет this . А также объявить функцию handleClick снаружи useEffect не обязательно использовать внутри

обновленный

Вы объявляете , что выполняете много функций . просто удалите delTodo функцию и добавьте асинхронность в handleClick

  const handleClick = async (todo_id) => {
    const del = await Axios.delete('http://localhost:3001/todo/'   todo_id)
    .then(() => {
      console.log('deletado!!')
    })
 }

<button key={i  }  id="del"  onClick={() => {handleClick(todo._id)}}/>
 

Функциональные компоненты не используются this (функции со стрелками также имеют проблемы с этим словом, имейте это в виду). Просто не используй this .