React Hooks: 如何向服务器发起POST请求

15 浏览
0 Comments

React Hooks: 如何向服务器发起POST请求

我是一个初学者。我正在尝试在React.js中使用一个简单表单实现POST请求，但我无法弄清楚如何将POST请求发送到数据库。我猜我还需要使用

。

任何帮助将不胜感激。

以下是来自React.js（前端）的代码：

import GameTestResult from './GameTestResult';
export default function App() {
 const[data, setData] = useState([]);
 const [formData, setFormData] = useState("");
 useEffect (() => {
  fetch('http://localhost:3000/game')
  .then(res => res.json()) 
 .then(result => setData(result.rows))
  .catch(err => console.log("error"))
  },[]);
  const handleChange = event => {
    setFormData(event.target.value)
    }
    const eventHandler = event => {
      event.preventDefault();
      setFormData("");
    }
  return (
        
          
          
        
      {data && data.map((element, index)=>(
            
      ))} 
  );
}

以下是来自express.js（后端）的代码：

var router = express.Router();
const pool = require("../config.js");
var cors = require('cors');
router.get("/game", cors(), (req, res) => {
  pool
    .query("SELECT * FROM game")
    .then((data) => res.json(data))
    .catch((e) => {
      res.sendStatus(404), console.log(e);
    });
});
router.post("/game", (req, res) => {
  const { name } = req.body; 
  pool
    .query('INSERT INTO game(name) values($1);', [name])
    .then(data => res.status(201).json(data))
    .catch(e => res.sendStatus(404));
 });
module.exports = router;

0

2 答案

0 Comments

React Hooks：如何向服务器发出POST请求

在开发React应用时，我们经常需要与服务器进行交互，例如发送POST请求。本文将介绍如何使用React Hooks发送POST请求，并解决一些常见的问题。

首先，我们需要在表单的输入框中添加一个name属性，并监听onChange事件。当用户在输入框中输入内容时，我们会调用setFormData函数来更新formData的值。代码如下：

const [formData, setFormData] = useState({})
const handleChange = (event) => {
  setFormData({ [event.target.name]: event.target.value })
}
return (
  

    

      
      
    

  

)

在上述代码中，我们将formData.name绑定到了输入框的value属性上，这样当用户输入内容时，会触发handleChange函数来更新formData的值。

接下来，我们需要在按钮的onClick事件中调用POST请求。代码如下：

const eventHandler = (event) => {
  fetch('http://localhost:3000/game', {
    method: 'POST',
    body: JSON.stringify(formData),
  })
    .then((res) => res.json())
    .then((result) => {
      console.log(result)
      setFormData('')
    })
    .catch((err) => console.log('error'))
}

在上述代码中，我们使用fetch函数发送POST请求，并将formData作为请求的body参数。注意，我们需要使用JSON.stringify方法将formData转换为JSON格式。

最后，我们可以在发送POST请求后，根据服务器返回的结果进行相应的处理。在上述代码中，我们使用.then方法来处理服务器返回的结果，并将其打印到控制台。

我们介绍了如何使用React Hooks发送POST请求到服务器的方法。通过监听输入框的onChange事件来更新formData的值，并使用fetch函数发送POST请求。同时，我们还解决了一些常见的问题，例如使用JSON.stringify方法将formData转换为JSON格式，以及在发送请求后清空formData的值。

希望本文对你有所帮助！如果有任何问题，请随时留言。

0
0 Comments

React Hooks: 如何向服务器发起POST请求

在这里，你可以这样做：

在组件挂载时获取游戏数据。当表单提交时，提交新的游戏。

export default function App() {
  const [data, setData] = useState([])
  const [formData, setFormData] = useState('')
  useEffect(() => {
    fetchGames() // 在组件挂载时获取游戏数据
  }, [])
  const fetchGames = () => {
    fetch('http://localhost:3000/game', {
      method: 'GET',
    })
      .then((res) => res.json())
      .then((result) => setData(result.rows))
      .catch((err) => console.log('error'))
  }
  const saveGames = () => {
    fetch('http://localhost:3000/game', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: formData, // 使用你自己的属性名/键
      }),
    })
      .then((res) => res.json())
      .then((result) => setData(result.rows))
      .catch((err) => console.log('error'))
  }
  const handleSubmit = (event) => {
    event.preventDefault()
    saveGames() // 在表单提交时保存游戏数据
  }
  const handleChange = (event) => {
    setFormData(event.target.value)
  }
  return (
    

      {/* 这里不需要使用 method="post"，因为 POST 请求是由 `fetch` 发起的，而不是 `form` */}
      {/* 另外，注意我修改了函数名为 handleSubmit */}
      

        
        
      

      {data &&
        data.map((element, index) => (
          
        ))}
    

  )
}

你可以阅读这篇文章了解如何使用fetch，以及这篇文章了解ReactJS中的表单工作原理。

另外，你应该考虑使用axios而不是fetch。axios在旧的浏览器上也能更好地工作。参考这个链接。

谢谢。老实说，我以前没有使用过axios，但我也会学习的。

0