reactjs - 为什么我的 Context 中的 useState 没有更新
问题描述
您好,我尝试将数据从我的数据库保存到我的变量 selectedRestaurant。我在 useEffekt 挂钩中使用 setSelectedrestaurant,但它不会更新我的变量。我得到一个空值。
这是我的代码
import React, { useContext, useEffect, useState } 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';
import Test from '../components/Test';
const RestaurantDetailedPage = (props) =>{
//const{ selectedRestaurant, setSelectedRestaurant}= createContext(RestaurantsContext);
const[ selectedRestaurant, setSelectedRestaurant]= useState(null);
const {id} = useParams();
useEffect(()=>{
const fetchData = async(id)=>{
const result = await RestaurantFinder.get("/"+id);
console.log(result);
setSelectedRestaurant(result.data.data);
console.log(selectedRestaurant);
}
fetchData(id);
},[]);//Wichtig, damit es nur 1x
/*
useEffect(()=>{
console.log("useEffect2");
console.log(selectedRestaurant);
},[selectedRestaurant]);
*/
return(
<div>{selectedRestaurant && (
<>
<div>{<AddReview/>}</div>
<div></div>
</>
)}
</div>
)
}
export default RestaurantDetailedPage;
我知道 useEffect 是异步的,所以我尝试了await setSelectedRestaurant(result.data.data)
但它没有用。我还定义了两个只能调用一次的 useEffects。一个用于更改,另一个用于更新,但两个 useEffects 都被调用了两次。我不知道为什么以及如何解决它。
希望你能帮助我
解决方案
尝试整理您的示例代码。有很多格式不佳的注释和拼写错误,使其难以解析。
编辑:
当您更新状态(即setSelectedRestraunt
)时,这些更改会一起批处理,直到下一个渲染循环才更改状态变量。
如果您想要console.log
或以其他方式使用数据,请创建一个依赖于该值的 useEffect。
import React, { useContext, useEffect, useState } 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';
import Test from '../components/Test';
const RestaurantDetailedPage = (props) =>{
const{ selectedRestaurant, setSelectedRestaurant}= createContext(RestaurantsContext);
const {id} = useParams();
useEffect(()=>{
const fetchData = async(id)=>{
const result = await RestaurantFinder.get("/"+id);
console.log(result);
setSelectedRestaurant(result.data.data);
}
fetchData(id);
},[]);
useEffect(()=>{
console.log("Selected Restaurant:", selectedRestaurant);
},[selectedRestaurant]);
return(
<div>{selectedRestaurant && (
<>
<div>{<AddReview/>}</div>
<div></div>
</>
)}
</div>
)
}
export default RestaurantDetailedPage;
原评论
考虑到这一点,您的<Reviews>
元素被注释掉了,这是故意的吗?
{/* <Reviews reviewsObject={selectedRestaurant.reviews}/>*/}
推荐阅读
- python - 使用多处理将数组添加到全局数组
- c++ - 为什么我在使用 Qt5 时会出现奇怪的崩溃,这取决于我创建应用程序实例的方式?
- wordpress - 升级到 Wordpress 5.7 后,对后期缩略图的主题支持停止工作
- python - 如何将工厂男孩实例转换为 json
- r - 为 S 形残差(正弦波曲线)选择哪种非线性回归
- openid-connect - 如何使遗留身份提供者与联合登录标准兼容?
- spring - 在实体中嵌入复杂对象
- git - 如何在 git 中获取子模块的当前提交 ID?
- typescript - 将自己的 vpc 添加到 ec2 实例的 Pulumi 代码
- python - 将列表合并为一个列表