reactjs - react axios和react-hook表单问题放在json中
问题描述
我是一名正在练习 react js 的学生,为此我正在开发一个日历,您可以在其中添加笔记,因为您会看到有些笔记是我手工制作的。我已经安装了 axios 来处理 json 并且数据的获取做得很好,但是当我尝试设置新数据时它给了我这个错误。
浏览器控制台向我显示此错误
PATCH http://localhost:5000/January/3/alarms/ 404 (Not Found) Uncaught (in promise) 错误:请求失败,状态码为 404 at createError (createError.js:16) at set (settle.js:17 ) 在 XMLHttpRequest.handleLoad (xhr.js:62)
这是我的 JSon
{
"January": [
{
"id": 1,
"alarms": [
{
"name": "Medico",
"initHour": "12:00",
"endHour": "12:35"
},
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
},
{
"name": "desayuno con Rick",
"initHour": "8:00",
"endHour": "9:00"
}
]
},
{
"id": 2,
"alarms": [
{
"name": "Desayuno",
"initHour": "9:00",
"endHour": "9:35"
},
{
"name": "banco",
"initHour": "11:00",
"endHour": "12:00"
}
]
},
{
"id": 3,
"alarms": []
},{
"id": 4,
"alarms": []
},
{
"id": 5,
"alarms": []
},
{
"id": 6,
"alarms": []
},
{
"id": 7,
"alarms": []
},
{
"id": 8,
"alarms": []
},
{
"id": 9,
"alarms": [
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
}
]
},
{
"id": 10,
"alarms": []
},
{
"id": 11,
"alarms": []
},
{
"id": 12,
"alarms": []
},
{
"id": 13,
"alarms": []
},
{
"id": 14,
"alarms": []
},
{
"id": 15,
"alarms": []
},
{
"id": 16,
"alarms": [
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
}
]
},
{
"id": 17,
"alarms": []
},
{
"id": 18,
"alarms": []
},
{
"id": 19,
"alarms": []
},
{
"id": 20,
"alarms": []
},
{
"id": 21,
"alarms": []
},
{
"id": 22,
"alarms": []
},
{
"id": 23,
"alarms": [
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
}
]
},
{
"id": 24,
"alarms": []
},
{
"id": 25,
"alarms": []
},
{
"id": 26,
"alarms": []
},
{
"id": 27,
"alarms": []
},
{
"id": 28,
"alarms": []
},
{
"id": 29,
"alarms": []
},
{
"id": 30,
"alarms": [
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
}
]
},
{
"id": 31,
"alarms": []
}
]
}
这是我的代码
import React, {useEffect, useState} from "react";
import './Calendar.scss';
import axios from "axios";
import Day from "./Day/Day";
import Modal from 'react-modal';
import { useForm } from 'react-hook-form';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
export default function Calendar() {
let subtitle;
const { register, handleSubmit} = useForm();
const [days, setDays] = useState([]);
const [modalIsOpen,setIsOpen] = useState(false);
const [id, setId] = useState([]);
Modal.setAppElement('#root')
useEffect(() => {
axios.get('http://localhost:5000/January').then(res => {
setDays(res.data);
});
}, [])
const onSubmit = form => {
console.log('http://localhost:5000/January/' + id + '/alarms', form);
axios.patch('http://localhost:5000/January/' + id + '/alarms/', form).then(res => {
console.log(res);
});
}
function openModal(id) {
setIsOpen(true);
setId(id);
}
function afterOpenModal() {
// references are now sync'd and can be accessed.
subtitle.style.color = 'rgb(72, 181, 163)';
}
function closeModal(){
setIsOpen(false);
}
return (
<div className="b-calendar">
<h3 className="b-calendar__title">January</h3>
<div className="b-calendar__headers">
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
<div>Sunday</div>
</div>
<div className="b-calendar__content">
<div className="b-december"><h1>28</h1></div>
<div className="b-december"><h1>29</h1></div>
<div className="b-december"><h1>30</h1></div>
<div className="b-december"><h1>31</h1></div>
{days.map((item, index) =>
<div key={index+1} id={index+1} onClick={() => openModal(item.id)}>
<Day items={item}/>
</div>
)}
</div>
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={_subtitle => (subtitle = _subtitle)}>Añadir Cita</h2>
<form className="b-loginForm" onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="initHour">
<span className="b-text-label">Init hour</span>
<input id="initHour" className="b-input" type="time" name="initHour" ref={register({ required: true})} />
</label>
<label htmlFor="endHour">
<span className="b-text-label">End hour</span>
<input id="endHour" className="b-input" type="time" name="endHour" ref={register()} />
</label>
<label htmlFor="name">
<span className="b-text-label">Alarms name</span>
<input id="name" className="b-input" type="text" name="name" ref={register({ required: true})} />
</label>
<input className="b-btn" type="submit" value="Guardar" />
<button onClick={closeModal}>Salir</button>
</form>
</Modal>
</div>
)
}```
[1]: https://i.stack.imgur.com/PDVPD.png
解决方案
推荐阅读
- javascript - 在 ES6 中,“生成器”实际上是如何在 V8 引擎中暂停的?
- php - PHP 注册表单
- networking - 端到端吞吐量和瓶颈链接
- php - 什么程序用于在 html 上下文中处理 php 文件?
- php - track kind div的输出src
- git - 将文件流式传输到 Github 存储库
- vue.js - 使用推送器的 Laravel 多组聊天室
- shopify - Shopify 液体:未定义购物车模板变体
- java - 共享通用库会解决我的“java.lang.OutOfMemoryError: Metaspace”吗?
- c# - DataBinding:“System.Data.DataRowView”不包含名为“Tasklist”的属性