Как мне в данном запросе обработать ошибку с определенным статусом?

Question

[smoovil]

Функция

export function createHouse(project_id, name, coords, district, website) {
    const token = localStorage.getItem('token')

    const request_json = {
        "name": name,
        "coords": coords,
        "district": district,
        "website": website,
    }

    const response =  fetch('https://jsonplaceholder.typicode.com/postsf', {
        method: 'POST',
        headers: {
            "Authorization": `Bearer ${token}`,
            "Content-Type": 'application/json'
        },
        body: JSON.stringify(request_json),
        
    }).then((res) => {
        if(res.status == 404) {
   console.log("error")
        }
    })

    
   
}

Компонента в которую я экспортирую функцию

import { useEffect, useState } from "react"
import { sendAuthRequest } from "./api";
import axios from "axios";
import { NavLink } from "react-router-dom";
import { createHouse } from "./api";
const Projects = () => {
  const [name, setname] = useState();
  const [coords, setcoords] = useState();
  const [district, setdistrict] = useState();
  const [website, setwebsite] = useState();
    function click() {

      createHouse(name, coords, district, website);
    }
    return (
     <div>
        <form>
          <input value={name} onChange={e => { setname(e.target.value) }} type="text" className="login" />
          <input value={coords} onChange={e => { setcoords(e.target.value) }} type="text" className="password" />
          <input value={district} onChange={e => { setdistrict(e.target.value) }} type="text" className="login" />
          <input value={website} onChange={e => { setwebsite(e.target.value) }} type="text" className="password" />
          <button onClick={click} type="submit">Добавить</button>
        </form>
        <NavLink to="/"><button>назад</button></NavLink>
     </div>
    )
}

export default Projects

Comments

[Виктор]

}).then((res) => {
        if(res.status == 404) {
             console.log(res.errors) //  оно?
        }
    })

Answer 1

[Rewwoken]

https://react.dev/reference/react-dom/components/form

Преврати свой createHouse в action для формы(подробнее - ссылка выше) и замени все useState на один useState для состояния ошибок.
setState ошибок используй в вышеупомянутом action