fetch 发送数据但没有 go 然后反应

Question

I have problem with fetch. The data have been send, but doesn't do in then or catch, so I don't get if response is send ot not, only when I go in database. That is the code:

import React, { useState } from 'react'
// import styles from './index.module.css'
import Input from '../input'
import SignUpButton from '../sign-up-button'

const SignUpForm = () => {
    const [username, setUsername] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const handleSubmit = (e) => {
        e.preventDefault()

        let data = { username: username, email: email, password: password }

        const headers = new Headers()
        headers.append('Content-Type', 'application/json')
        const options = {
            method: 'POST',
            headers: headers,
            mode: 'cors',
            cache: 'default',
            body: JSON.stringify(data)
        }

        const request = new Request(`http://localhost:5000/user/sign-up`, options)

        fetch(request)
            .then(res => {
                setUsername('')
                setEmail('')
                setPassword('')
            })
            .catch(e => {
                console.log(e)
            })

    }

    return (
        <form onSubmit={handleSubmit}>
            <Input
                onChange={e => setUsername(e.target.value)}
                label='Username:'
                name='username'
                placeholder='marolio'
                value={username}               
            />
            <Input
                onChange={e => setEmail(e.target.value)}
                label='Email:'
                name='email'
                placeholder='marolio@yahoo.com'
                value={email}              
            />
            <Input
                onChange={e => setPassword(e.target.value)}
                label='Password:'
                name='password'
                value={password}                
            />
            <SignUpButton
                text='CREATE ACCOUNT'
                btnStyle='submit'
            />
        </form>
    )
}

export default SignUpForm

Same structire worked for me in other project, so maybe something is changed but I don't know it. Every help will be useful. Thanks!

Answer 1

I made this change and it work, but I'm still curious why then and catch doesn't worked.

const response = fetch(request)

if(response){
    setUsername('')
    setEmail('')
    setPassword('')
} else{
    console.log('error')
}