React使用Moralis存数据时每次输入变更都触发保存如何解决

• 核心错误是提交按钮的onClick属性直接调用了createNewPost函数，而非传递函数引用。React组件渲染时会立即执行带括号的函数调用，你每次修改输入框内容都会触发state更新、组件重渲染，进而自动执行一次存储逻辑，就出现了输入一个字符存一次的问题。
• 次要问题：React中DOM的类名属性需要用className而非原生的class，否则样式属性不会生效。

两种修改方式都可以，推荐用第二种表单原生提交的方式，语义更规范，还能支持回车提交：

方案1：修改按钮onClick为函数引用 #

把按钮的onClick改成箭头函数包裹，只有点击时才会触发函数执行：

<button type="submit" onClick={(e) => createNewPost(e, title, content)}>Submit Post</button>

方案2（推荐）：绑定表单onSubmit事件 #

将提交逻辑绑定到form的onSubmit上，删掉按钮的onClick，符合原生表单交互逻辑：

<form action="#" className="createpost" onSubmit={(e) => createNewPost(e, title, content)}>
  {/* 其余表单内容不变 */}
  <button type="submit">Submit Post</button>
</form>

额外补充了受控组件绑定、提交后清空输入框的优化逻辑，更符合通用开发规范：

import React, {useState} from 'react'
import './css/createpost.css'
import { useMoralis } from "react-moralis";

function CreatePost() {
    const [title, setTitle] = useState("")
    const [content, setContent] = useState("")
    const { Moralis } = useMoralis();

    const createNewPost = (e) => {
        e.preventDefault()
        const newPost = Moralis.Object.extend("Posts");
        const post = new newPost();
        post.set("title", title);
        post.set("content", content);
        post.save();
        // 提交完成后清空输入框
        setTitle("")
        setContent("")
        return post;
    }

    return (
        <div>
            <div>
            <form action="#" className="createpost" onSubmit={createNewPost}>
               <div className="data">
                  <label>Title</label>
                  <input type="text" required value={title} onChange={(e) => setTitle(e.target.value)}/>
               </div>
               <div className="data">
                  <label>Content</label>
                  <input type="text" required value={content} onChange={(e) => setContent(e.target.value)}/>
               </div>
               <div className="btn">
                  <div className="inner"></div>
                  <button type="submit">Submit Post</button>
               </div>
            </form>
            </div>
      </div>
    )
}

export default CreatePost

内容的提问来源于stack exchange，提问作者godtrianglefd