JSON文件服务器不会提取

Question

我创建了一个JSON文件，并且运行正常，但是它没有插入一个新项目，只能删除。下面遵循代码。我只是在模拟使用一些输入，删除和更新的服务器，与React 18.1.0和材料UI一起工作。 JSON数据文件“ SRC/DATA/DB.JSON”它从组件“ Notes”正确加载。 我需要在功能handlesubmit上插入一个新项目，该项目已在OnSubmit形式上插入。

Function to insert a new item, and after, go to the root page "/".

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}>

 Deleting is working correctly. Why insert doesn't work?
 
 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>
    )
}

最好的问候，并提前感谢。

Answer 1

我使用此代码解决了此问题：。然后将其放置在函数内，因此应将其放置在括号的末尾，下一行。

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,
        display: "block",
    }
    
}));

export default function Bancos(){
    const classes = useStyles()
    const history = useHistory()
    const [title, setTitle] = useState('')
    const [details, setDetails] = useState('')
    const [titleError, setTitleError] = useState(false)
    const [detailsError, setDetailsError] = useState(false)
    const [status, setStatus] =useState('active')

    const handleSubmit = (e) => {
        e.preventDefault()
        setTitleError(false)
        setDetailsError(false)

        if(title == ''){
            setTitleError(true)
        }

        if(details == ''){
            setDetailsError(true)
        }

        if( title && details){
            fetch('http://localhost:8000/notes', {
                method: 'POST',
                headers: { "Content-type": "application/json" },
                body: JSON.stringify({ title, details, status })
            })
            .then(() =>  history.push('/'))
        }
    }

    return(
        <Container>
           <Typography  variant="h6" color="textSecondary" align="center" gutterBottom
            className="titleBank">
               Cadastrar uma nova  Tarefa - Post-It
           </Typography>

            <form noValidate autoComplete="off" onSubmit={handleSubmit}>