如何解決在反應中使用Axios時的錯誤

客戶端/App.js：

    import React, { useState, useEffect } from "react";
    import Axios from "axios";
    const App = () => {
      const [movieName, setmovieName] = useState("");
      const [movieReview, setmovieReview] = useState("");
      const [getReview, setgetReview] = useState([]);
    
      useEffect(() => {
        Axios.get("http://localhost:3001/api/get", (result) => {
          console.log(result.data);
          setgetReview(result.data);
        });
      }, []);
    
      const submitReview = () => {
        Axios.post("http://localhost:3001/api/insert", {
          movieName: movieName,
          movieReview: movieReview,
        })
          .then(() => {
            alert("Success");
          })
          .catch((e) => alert(e));
      };
      return (
        <div className="index">
          <h2>movie name</h2>{" "}
          <input type="text" onChange={(e) => setmovieName(e.target.value)} />
          <h2>movie rating</h2>{" "}
          <input type="text" onChange={(e) => setmovieReview(e.target.value)} />
          <button onClick={submitReview}>submit</button>
          {getReview.map((val) => {
            return (
              <h1>
                Movie name : {val.movieName} Movie review: {val.movieReview}
              </h1>
            );
          })}
        </div>
      );
    };
    
    export default App;

服務器/index.js：

    const express = require("express");
    const mysql = require("mysql");
    const cors = require("cors");
    const bodyParser = require("body-parser");
    
    const app = express();
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(cors());
    app.use(express.json());
    
    const db = mysql.createConnection({
      host: "localhost",
      root: "root",
      password: "",
      database: "crudatabase",
    });
    
    db.connect((err) => {
      if (err) throw err;
    });
    
    app.get("/api/get", (req, res) => {
      const selectStmt = "SELECT movieName,movieReview FROM movie_review;";
      db.query(selectStmt, (err, result) => {
        res.send(result);
      });
    });
    
    app.post("/api/insert", (req, res) => {
      const movieName = req.body.movieName;
      const movieReview = req.body.movieReview;
      const insertStmt =
        "INSERT INTO movie_review (movieName,movieReview) VALUES (?,?);";
      db.query(insertStmt, [movieName, movieReview], (err, result) => {
        console.log(err);
      });
    });
    
    app.listen(3001, () => {
      console.log("Server running on 3001");
    });

在上面的 react 和 express 代碼中，我能夠將資料插入資料庫中，但是then()在客戶端中插入部分后無法正常作業。也useEffect不起作用。我嘗試了很多方法，但無法找到原因。如果有人可以解決我的錯誤并且所有依賴項都已經安裝，我會很高興。

uj5u.com熱心網友回復：

1. 在您的 中useEffect，您將回呼傳遞給Axios.get- 這與Axios API不一致（您甚至在submitReview函式中正確執行！）：

useEffect(() => {
    // change to Promise.then() chain
    Axios.get("http://localhost:3001/api/get").then((result) => {
      console.log(result.data);
      setgetReview(result.data);
    });
  }, []);

2. 您的then()鏈無法正常作業，因為您的 POST 回應處理程式從不回傳狀態或回應！就像在您的GET處理程式中一樣，您的 POST 處理程式需要讓客戶端知道請求已成功。例如res.send(/*...*/)，甚至只是res.sendStatus(200)。

uj5u.com熱心網友回復：

由于您正在處理承諾并在提交值時使用了 thenable 語法，但在獲取值時沒有使用它。嘗試使用以下代碼并檢查這是否解決了您的問題。處理承諾的一種更簡潔的方法是使用 async/await 嘗試使用以下代碼希望這能解決您的問題。

    useEffect(() => {
    const getMovies = async () => {
      try {
        let { data } = await Axios.get("http://localhost:3001/api/get");
        console.log(data);
        setgetReview(data);
      } catch (error) {
        console.log(error);
      }
    };

    getMovies();
  }, []);

uj5u.com熱心網友回復：

您的 useEffect 正在回傳一個承諾，嘗試在您的代碼上使用 async await 或 .then。

嘗試將其更改為：

useEffect(() => {
        Axios.get("http://localhost:3001/api/get", (result) => {
          console.log(result.data);
          setgetReview(result.data);
        });
      }, []);

到：

useEffect(() => {
      const get_data = async () => {
         try {
           const result = await Axios.get("http://localhost:3001/api/get")
           console.log(result.data)
           setgetReview(result.data)
         } catch (e) {
           console.log(e)
         }
      }

      get_data()
}, []);

標籤：javascript 节点.js 反应 表达 默恩

上一篇：將css應用到相鄰元素

下一篇：當window.scroll事件發生時，如何獲取我的游標所在的元素？