【发布时间】：2021-07-13 05:42:44
【问题描述】：
当我使用 useEffect 钩子时，我学习了 react 并且在 setMethode 上遇到了一些问题。
在我的程序中，我在 react 和数据库 postgres 之间创建了一个连接。通过该连接，我从数据库中获取数据并将其作为 JSON 文件发送到我的前端应用程序。这是我的 server.js
const express = require("express");
const cors = require("cors");
const db = require("./db");
const app = express();
const port = 3005;
//Das ist die middelware, dass anfragen vor den anfragen get post put delet bearbeitet
app.use(
cors(),
express.json()//Wird gebraucht um den body zu definieren bzw. json files zu empfangen
);
//Funktion listen hat (portnummer, callbackfunktion)
app.listen(port, ()=>{
console.log("Server is up and listining on Port: " + port);
});
app.get("/getRestaurants/:id", async (req, res) =>{
try{
console.log("Get One");
const restaurants = await db.query("select * from restaurants where id = $1",[req.params.id]);
//console.log(result.rows[0].restaurant_name);
const reviews = await db.query("select * from reviews where restaurantid = $1",[req.params.id]);
res.status(200).json({
success:"true",
data:{
restaurants: restaurants.rows[0],
reviews: reviews.rows
},
});
console.log("works");
}
catch(err){
console.log(err);
}
})
通过 Context.jsx 文件中的列表，我保存数据库中的值并将其用于我的前端应用程序。这是我的 Context.jsx
import React ,{useState, createContext} from 'react';
export const RestaurantsContext = createContext();
export const RestaurantsContextProvider = props =>{
//Definition einer Liste mit []
const [restaurants, setRestaurants] = useState([]);
const [selectedRestaurant, setSelectedRestaurant] = useState(null);
//Hier wir din einem Hook die function setRestaurants benutzt um "restaurants" zu verändern, mit einem array
const addRestaurant =(newRestaurant)=>{
//...restaurants kopiert die Werte und fügt newRestaurant ein
setRestaurants([...restaurants, newRestaurant]);
}
return(
<RestaurantsContext.Provider value = {{restaurants: restaurants,//variable
setRestaurants, //funktion
addRestaurant, //funktion
selectedRestaurant, //variable
setSelectedRestaurant //funktion
}}> //
{props.children}
</RestaurantsContext.Provider>
)
}
要使用我在 Context 中实现的这个函数和变量，我必须在我的下一个 JSX 文件中导入它。这就是 RestaurantDetailedPage。在此页面中，我想获取有关评论和餐厅的信息。所以我使用 UseEffect 挂钩从我的数据库中获取 Dadas 并将其保存在来自 Cotext 的列表中。您可以在我的以下代码中看到它。
import React, { useContext, useEffect } from 'react';
import { useParams } from 'react-router';
import RestaurantFinder from '../api/RestaurantFinder';
import { RestaurantsContext } from "../context/RestaurantsContext";
import Reviews from '../components/Reviews';
import StarComponent from '../components/StarComponent';
import AddReview from '../components/AddReview';
const RestaurantDetaiiledPage = () =>{
const{ selectedRestaurant, setSelectedRestaurant}= useContext(RestaurantsContext);
const {id} = useParams();
useEffect(async()=>{
try{
const result = await RestaurantFinder.get("/"+id);
console.log(result);
//Bekommt restaurant und reviews
setSelectedRestaurant(result.data.data);
console.log("useEffect");
console.log(selectedRestaurant);
}catch(err){}
}, []);//Wichtig, damit es nur 1x
return(
<div>{selectedRestaurant && (
<>
<div>{<Reviews reviewsObject = {selectedRestaurant.reviews}/>}</div>
<div>{<AddReview/>}</div>
</>
)}
</div>
)
}
export default RestaurantDetaiiledPage;
在我的图片上，您可以看到 consol.log(result)from 结果
所以我从我的数据库中获取数据。但是为什么我的函数 setSelectedRestaurant 不适用于命令 setSelectedRestaurant(result.data.data); 我的程序就在此时停止。我没有从我的 console.log("useEffect") 得到“useEffect”输出。
希望你能帮助我
【问题讨论】：
-
您的代码中存在许多问题：您无法将异步函数传递给 useEffect，您在花括号内使用 JSX 标签等。
-
我只是按照教程并尝试独立完成。所以我不只是复制粘贴
-
好的，我有解决方案。我必须先使用两个 useEffects 重新渲染两次：
useEffect(()=>{setSelectedRestaurant(result.data.data)},[]第二：useEffect(()=>{console.log(selectedRestaurant)},[selectedRestaurant]并且它有效
标签： javascript node.js reactjs database