快递功能多次发送

Question

我的react js文件目前是这样的

export default function Blog() {
    
    const [title, setTitle] = useState('');
    const [blog, setBlog] = useState('');
    const sumbitBlog = () => {
        axios.post('http://localhost:3001/api/insert', {
            title: title,
            blog: blog
            });
    }
    return (
        <div className='container'>
            <div className='row'>
                <form className='col-lg-12 form-group'>
                   <div className="form-group">
                        <label for="formGroupExampleInput">Title</label>
                        <input type="text" className="form-control"placeholder="Title" name="title" onChange={(e)=>{
                            setTitle(e);
                        }}/>
                    </div>
                    <div className="form-group">
                        <label for="formGroupExampleInput2">Body</label>
                        <input type="text" className="form-control" placeholder="Body" name="blog" onChange={(e) =>{
                            setBlog(e);
                        }}/>
                    </div>
                    <button className='btn-primary' type="submit"onClick={sumbitBlog()}>Submit</button>
                </form>
            </div>
            
        </div>
    );
}

还有我的 nodejs 后端代码：

app.post('/api/insert', (req, res) =>{

    const title = req.body.title;
    const blog = req.body.blog;
    const sql = `INSERT INTO posts (title, body) VALUES ("this","works")`;
    db.query(sql,[title, blog], (err, result)=>{
        if(err) throw err;
        console.log(title);
        console.log(blog)
    });

});

即使看起来正确，它仍然会不断发送多个请求 我有我不知道发生了什么，我尝试使用不同的方式从互联网上查看，但只有这样它才能插入到数据库中。任何其他方式它甚至都不会尝试连接到它。

the database

Answer 1

尝试传递对函数的引用，而不是每次渲染时都触发它。

所以： onClick={sumbitBlog} 代替： onClick={sumbitBlog()}

Answer 2

您的后端函数不会将响应发送回客户端，因为它缺少res.json() 函数调用或类似函数。如果插入语句

res.json(result);

在两个console.log 语句之后，客户端将收到一个 JSON 响应，然后您必须使用它以某种方式更新客户端，以便用户可以读取插入成功。以下代码只是提醒用户并显示 JSON，但您可能想要更优雅的东西。

const sumbitBlog = async () => {
  var response = await axios.post('http://localhost:3001/api/insert', {
    title: title,
    blog: blog
  });
  alert(JSON.stringify(response.data));
}