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

[Anonymous]

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

useEffect(() => {
const dataFetch = async () => {
setIsLoading(true);
const data = await (
await fetch(`${API_URL}/onboarding/fetchData`)
).json()
console.log(data)
// setState(data)
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