在 React 中重置表单并控制台记录服务器端的详细信息

Question

1. 提交后如何重置表单？现在提交表单后，详细信息仍然显示在表单中。目前表单只是提交到服务器，没有任何与数据库的连接。
2. 另外，是否可以console.log()在服务器端提交的详细信息？我试过console.log("Serverside printing:"+req.newstitle);，但我越来越不确定。

server.js：

app.post('/service/news', (req, res) => {
  console.log("Serverside printing:"+req.newstitle);
  res.json({ express: "news" })
});

News.js：

const [newstitle, setNewsTitle]=useState([]);
  const [newsDetails, setNewsDetails]=useState([]);
  const [isSent, setIsSent] = useState(false);

  const successfullMessage = <p>Details submittted successfully !</p>
  const form = <form>...</form>

  const handleSubmit = e => {
    e.preventDefault()
    fetch('http://localhost:3000/service/news', {
      method: 'POST',
      body: JSON.stringify({ newstitle, newsDetails })
    }).then(() => setIsSent(true))
  }

  return(
          <div className="container">            
            <div className="layout">
              <span className="col col-main">
                <h3>What is so special about Us ?</h3>
                <span className="specialAboutus_data_1">
                  <form onSubmit={handleSubmit} className="myForm">
                    <div className="loginfillContentDiv formElement">
                      <label>
                        <input name="newstitle"  className="inputRequest formContentElement" type="text" placeholder="Title" 
                        onChange={e => setNewsTitle(e.target.value)}/>
                      </label>
                      <label>
                        <textarea name="newsdetails" className="inputRequest formContentElement" type="textarea" placeholder="News details" 
                        onChange={e => setNewsDetails(e.target.value)}/>
                      </label>
                    </div>
                    <div className="loginsubmitButtonDiv formElement">
                        <button type="submit" className="submitButton">Save</button>
                    </div>
                  </form>
                </span>
              </span> 
              <span className="col col-complementary">
              <h3>Are you keen to join us ? </h3>
              <span className="joinAboutus_data_1">
                 {isSent ? successfullMessage  : form }
              </span>  
              </span>  
            </div>     
          </div>
        )

Answer 1

我不明白为什么newsDetails 和newstitle（我猜应该是newsTitle...？）被定义为[]。字符串不是更有意义还是我在这里遗漏了什么？
此外，您的输入缺少 value 属性，该属性应由相应的状态变量设置，以便将 UI 与状态同步。
要清除表单，您可以使用空值调用 setNewsDetails 和 setNewsTitle，例如：setNewsTitle([])（或 setNewsTitle('')）。
无论如何，这是一个基本的工作示例：

const App = () => {

  // console.log('works');
  const [newsTitle, setNewsTitle] = useState('');
  const [newsDetails, setNewsDetails] = useState('');
  const [isSent, setIsSent] = useState(false);

  const successfullMessage = <p>Details submittted successfully !</p>
  const form = <p>Form</p>

  const handleSubmit = () => {
    e.preventDefault();
    console.log('state: ', newsTitle, newsTitle);

    // fetch here

    setIsSent(true);

    // clear the form
    setNewsTitle('');
    setNewsDetails('');
  }

  return (
    <div>
      <h1>hello!</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            <input
              name="newstitle"
              type="text"
              placeholder="Title"
              value={newsTitle} // sync with state
              onChange={e => setNewsTitle(e.target.value)} 
            />
          </label>
          <label>
            <textarea
              name="newsdetails"
              placeholder="News details"
              value={newsDetails} // sync with state
              onChange={e => setNewsDetails(e.target.value)}
            />
          </label>
        </div>
        <div>
            <button type="submit">Save</button>
        </div>
      </form>
      {isSent ? successfullMessage : form}
    </div>
  ) 
}

至于服务器上的日志记录，我认为您在请求中缺少body 属性：

app.post('/service/news', (req, res) => {
  console.log("Serverside printing:" + req.body.newstitle);
  res.json({ express: "news" })
});