Как убрать ошибку при компиляции реакт-приложения?

Question

[Kentavr16]

в рамках обучения пишу свою тудушку. Сейчас пишу функцию для удаления задания по клике на кнопку. вот код react - элемента:

import React from 'react'
import axios from "axios"

class LoadTask extends React.Component{
    constructor(props) {
        super(props);
        this.state = {items:[],
        };
        
    }



    async componentDidMount() {
        try {axios.get('http://localhost:5000/api/getTask')
        .then(response => this.setState({items: Object.values(response.data)}));} 
        catch ( error ) {
            console.log(error)
        }; 
    }
       

    render() {

        async function todelete(todel) {
           try{axios.delete("http://localhost:5000/toDel"), {data:{todel}}}
           catch(error){
               console.log(error);
               if(error){
                   return(console.log("error"));
               }else{
                   return(alert("tesk deleted!"))
               }
           }
        }



    return(
        <div className="loadTaskWrap">
            <p>Здесь ты можешь просмотреть существующие таски:</p>
            <div className="desP">
                <div>{this.state.items.map((item) =>
                (<div key={item.description} className='styleTask' >
                    <p className="stDesk" >{item.description}:</p>
                    <div>{item.task}
                    </div>
                    <div>{item.addDate}</div>
                    <button onClick={()=>todelete(item._id)}>Удалить задачу</button>
                <button>Отметить как выполненную</button>
                </div>))}</div>
            </div>
        </div>
    )
}


}

export default LoadTask

функция todelete должна удалять выбранную задачу. Но при попытке запустить реакт-приложение ловлю в консоли ошибку: Line 26:16: Expected an assignment or function call and instead saw an expression no-unused-expressions.

озадачен вдвойне, так как стоит прописать в todelete что-то типа alert(todel), как все работает. В чем моя ошибка?

Comments

[Василий Банников]

Зачем там вообще return, если обе этих функции возвращают undefined?
И почему там axios.delete без await вызывается?

Answer 1

[Kentavr16]

Решилось путем перемещения функции из рендера и вызовом ее через this. Todelete. Нужно наверное еще раз перечитать документацию по react

Answer 2

[Дима Паутов]

return(console.log("error"));
return(alert("tesk deleted!"))

Уберите return в catch. Либо верните ошибку, либо ничего не возвращайте

Comments

[Kentavr16]

к сожалению это не помогает. Ошибка в консоли все та же(

[Дима Паутов]

Kentavr16, что то вы меня обманываете))
Выглядеть всё должно так:

async function todelete(todel) {
	try {
		await axios.delete("http://localhost:5000/toDel"), {data:{todel}}
	} catch(error) {
	   console.log(error);
	   
	   if(error){
		   console.log("error")
	   }else{
		   alert("tesk deleted!")
	   }
   }
}

P.S. Вам наверное нужно подучить, что такое try catch и как он работает.

Конструкция alert("tesk deleted!") не должна выполниться))

[Kentavr16]

Дима Турков, да, логично)