'Json Server is not working - does not fetch to insert, but Delete is working - using REACT 18.1.0
I made a json server, after installation globally, everything is working, and the command "npx json-server --watch src/data/db.json --port 8000" to watch the data from file db.json, on port 8000, is working properly, it loads the data, and also delete, but does not insert a new item. So I need help please to fix this situation. This server is just for production mode for my application in React 18.1 and nodejs. I'm using Material-ui as well. Below my code to insert and delete data.
import React, { useEffect, useState } from 'react';
import { Container, Grid } from '@mui/material';
import CardBanks from '../components/CardBanks';
export default function Notes(){
const [ notes, setNotes ] = useState([]);
useEffect(() => {
fetch('http://localhost:8000/banks')
.then(res => res.json())
.then(data => setNotes(data))
}, []);
const handleDelete = async (id) => {
await fetch('http://localhost:8000/banks/' + id, {
method: 'DELETE'
})
const newNotes = notes.filter(note => note.id != id) ;
setNotes(newNotes);
}
return(
<Container>
<Grid container spacing={3}>
{notes.map(note => (
<Grid item key={note.id} xs={12} md={6} lg={4}>
<CardBanks note={ note } handleDelete={handleDelete}/> {/*passing props note with element note */}
</Grid>
))}
</Grid>
</Container>
)
}
// Inserting a new Bank (Bank component)
import React, { useState } from 'react';
import { FormControlLabel, RadioGroup, Typography } from '@mui/material';
import { Button } from '@mui/material';
import { Container } from '@mui/material';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { makeStyles } from '@mui/styles';
import { TextField } from '@mui/material';
import { Radio } from '@mui/material';
import { FormLabel } from '@mui/material';
import { FormControl } from '@mui/material';
import { useHistory } from 'react-router-dom';
import '../Styles.css';
import { Box } from '@mui/material';
const useStyles = makeStyles(({
field: {
spacing: 4,
margimTop: 50,
marginBottom: 100,
display: "block",
}
}));
export default function Bancos(){
const classes = useStyles()
const history = useHistory()
const [name, setName] = useState('')
const [address, setAddress] = useState('')
const [nameError, setNameError] = useState(false)
const [addressError, setAddressError] = useState(false)
const [status, setStatus] =useState('active')
const handleSubmit = (e) => {
e.preventDefault()
setNameError(false)
setAddressError(false)
if(name == ''){
setNameError(true)
}
if(address == ''){
setAddressError(true)
}
if( name && address){
fetch('http://localhost:8000/banks', {
method: 'POST',
headers: { "Content-type": "application/json" },
body: JSON.stringify({name, address, status})
.then(() => history.push('/')),
})
}
}
return(
<Container>
<Typography variant="h6" color="textSecondary" align="center" gutterBottom
className="titleBank">
Cadastrar um novo Banco
</Typography>
<form noValidate autoComplete="off" onSubmit={handleSubmit}>
After fetching a new Bank, I do a push to "/" root and it doesn't go to the root page. Follow the message of delete, but I'm not getting error message on fetching the post. Loading src/data/db.json
Done
Resources http://localhost:8000/banks
Home http://localhost:8000
Type s + enter at any time to create a snapshot of the database Watching...
GET /banks 304 25.153 ms - - GET /banks 304 5.086 ms - - GET /banks 304 3.618 ms - - GET /banks 304 4.286 ms - - GET /banks 304 3.166 ms - - DELETE /banks/4 200 7.424 ms - 2
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
