Рендеринг данных в компоненте React ⇐ Javascript

[Anonymous]

Я отформатировал объект соответствующим образом, и мои задачи отображаются. При удалении элемента проблема сохраняется: элемент исчезает из пользовательского интерфейса только при перезагрузке страницы вручную. Как это может работать без перезагрузки вручную?
Когда я добавляю элемент и удаляю его, мне приходится вручную перезагрузить страницу, прежде чем я смогу увидеть обновленный список.
Как можно обновить компонент новой информацией о базе данных без необходимости перезагрузки страницы вручную и без необходимости сопоставлять 2x компонента, как показано ниже?
Я ознакомился с документацией Reacts https://react.dev/reference/react/useState: но при включении или вызове функции внутри исходного состояния я получаю сообщение об ошибке, что мой метод .map не является функцией.
Я явно не понимаю чего-то важного в React. Это может быть очень простой вопрос на реакцию, но я пытаюсь сделать все без ИИ.
Основной файл jsx:
function Onboarding_Form_Main() {
const [tasks, setTasks] = useState([])
const [newTask, setNewTask] = useState("")
const [error, setError] = useState([""]);

useEffect(() => {
const dataFetch = async () => {
setIsLoading(true);
const data = await (
await fetch(`${API_URL}/onboarding/fetchData`)
).json()
console.log(data)
const formattedData = data.map((input, i) => {
return {
description: i,
input: {
id: input.id,
name: input["name"]
}
}
})

console.log("formatteddata", formattedData )
setTasks(formattedData)
setIsLoading(false);
};
dataFetch();
}, [])

async function handleSubmit() {
if (newTask) {
setTasks([...tasks, newTask])
setNewTask("")

await fetch(`${API_URL}/onboarding/postData` , {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ "name": newTask })
})
.then((response) => console.log(response))
}
}

function remove_task_1(taskToRemove) {
return fetch(`${API_URL}/onboarding/delete/${taskToRemove}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json"
},
signal: AbortSignal.timeout(5000)
})
}

async function removeTask(taskToRemove) {
setError("Something went wrong")

try {
await remove_task_1(taskToRemove)
const filteredTasks = tasks.filter((task) => task !== taskToRemove)
setTasks(filteredTasks);
} catch (e) {
console.error(e)
setError("Something went wrong")
}
}

function handlepage(task) {
window.location.href = `/onboarding/user/${task}`
}

const [isLoading, setIsLoading] = useState(false);

return (


{isLoading
? (

Lädt...

) : null
}




setNewTask(e.target.value))}
placeholder="Name"
/>

Hinzufügen


{tasks && tasks.map((task, key) => (

))}
{error &&
{error}
}



)
}

export default Onboarding_Form_Main;

ToDoItem:
function ToDoItem_2({ item, gotopage, onRemove }) {
const [modal, setModal] = useState(false)

const toggleModal = () => {
setModal(!modal)
}

if (modal) {
document.body.classList.add("active-modal")
} else {
document.body.classList.remove("active-modal")
}

return (



{item}


gotopage(item)} />

toggleModal()} />




{modal && (

)}

)
}

export default ToDoItem_2;

Модальный режим:
export default function Modal({ item, toggleModal, completeRemove }) {
return (








Mit diser Aktion wird der Mitarbeiter und sein Fortschritt gelöscht

{
toggleModal(), completeRemove(item)
}}
>
Löschen




)
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -component