Столкнулся с ошибкой в моем коде из-за интеграции интерфейса с серверной частью

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

После исправления всех этих проблем я хочу знать, как будет работать навигация, поскольку я хочу перейти к маршруту создания задачи.

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';

export default function LoginPage() {
const[username , setUsernamne] = useState("");
const[password , setPassword] = useState("");
const navigate = useNavigate();
return (
<div>
.
.
.

</div>

<div style = {{ paddingTop: "18px", paddingLeft: "10px", }}>
    <button onClick = {async ()=>
        { await fetch("http://localhost:3005/signin",{ method: "POST", body: JSON({
        username: username, password: password }), headers:{ "content-type": "application/json",
        } }).then(async function(res){ const json = await res.json(); console.info(json);
        }) }} >Login
    </button>
</div>
)
}

javascript reactjs express

19.02.2024 13:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

107

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь вы обновили все необходимые функции, а также добавили маршрут создания задач.

Ошибки, которые необходимо устранить: -

1- «Тело не может быть определено только как JSON; вам необходимо указать преобразование JavaScript в строку, что выполняется с помощью JSON.stringify».

2- «Как указано в вашем «типе контента», что неверно, вам следует определить его как «Тип контента»: «application/json».

3. Используйте try/catch для обнаружения ошибок в нашем интерфейсе.

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';

export default function LoginPage() {
    const[username , setUsernamne] = useState("");
    const[password , setPassword] = useState("");
    const navigate = useNavigate();
  return (
        <div>
         .
         .

        </div>
        <div style = {{
            paddingTop:"18px",
            paddingLeft:"10px",
        }}>
            <button
                onClick = {async ()=>{
                    try{
                        const response = await fetch("http://localhost:3005/signin",{
                            method: "POST",
                            body: JSON.stringify({
                                username: username,
                                password: password
                            }),
                            headers:{
                                "Content-type": "application/json",       
                            }
                        })
                        console.info(response);
                        if (!response.ok){
                            const errData = await response.json();
                            alert(errData.msg); // {backend error message }
                        }else{
                            navigate('/create-todo')
                        }
                    }catch(e){
                        alert("something error occured");
                    }
                }}
            >Login</button>
        </div>
    </div>
  )
}

Что ты сделал? Зачем ты это сделал? Можете ли вы уточнить? Простое размещение исправлений в коде делает этот сайт не сайтом вопросов и ответов, а просто сайтом исправления кода, который помогает очень немногим пользователям. Добавьте несколько комментариев, объясняющих, почему что-то работает, а изначально нет, или что-то в этом роде...

— 19.02.2024 13:08

С объяснениями также покончено.

— 19.02.2024 13:15

19.02.2024 13:05