为什么我的 Context 中的 useState 没有更新

Question

您好，我尝试将数据从我的数据库保存到我的变量 selectedRestaurant。我在 useEffekt 挂钩中使用 setSelectedrestaurant，但它不会更新我的变量。我得到一个 null 值。

这是我的代码

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 都被调用了两次。我不知道为什么以及如何解决它。

希望你能帮助我

Answer 1

尝试整理您的示例代码。有很多格式不佳的 cmets 和拼写错误导致解析变得困难。

编辑：

当您更新状态（即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}/>*/}