Javascript 如何在从firebase提取数据后更新react上下文

嘿，每个人都是新来的。我只是试图设置一些从Firebase检索到的评论，但似乎无法使其正常工作。我尝试了一些解决方案，我正在努力让它工作，任何帮助都将不胜感激

import React, {useContext, useEffect, useState} from 'react';
import firebase from "firebase";
import ReviewsContext from "./review-context";

const Reviews = () => {
const db = firebase.firestore();
let reviews = useContext(ReviewsContext);
let [reviewsLoaded, setReviewsLoaded] = useState(false);

function getReviews(){
  db.collection('reviews')
    .get()
    .then((snapshot) => {
      let dataArray = [];

      snapshot.docs.forEach(doc => {
        dataArray.push(doc.data());
      });

      reviews = dataArray;
      setReviewsLoaded(true);
      console.log('reviews', reviews); // logs the correct amount of reviews
    })
  }

  function renderReviews() {
  console.log('renderReviews reviewsLoaded', reviewsLoaded); // is true
  console.log('renderReviews reviews length', reviews.length); // is 0
  if(reviewsLoaded) {
    reviews.map((data) => {
      return (
        <li key={data.name}>
          <h3>{data.name}</h3>
          <p>{data.position}</p>
        </li>
      )
    });
  }
  else {
    return false
   }
  }

  useEffect(() => {
    getReviews(); // this seems to fire before renderReviews
  }, []);


  return (
   <div>
     <ul>
       {renderReviews()}
     </ul>
   </div>
  )
};

export default Reviews;

import React，{useContext，useffect，useState}来自'React'；
从“firebase”导入firebase；
从“/review context”导入ReviewContext；
const Reviews=（）=>{
const db=firebase.firestore（）；
let reviews=useContext（ReviewContext）；
让[ReviewLoaded，SetReviewLoaded]=useState（false）；
函数getReviews（）{
db.collection（'reviews'）
.get（）
。然后（（快照）=>{
让dataArray=[]；
snapshot.docs.forEach（doc=>{
dataArray.push（doc.data（））；
});
评论=数据数组；
SetReviewLoaded（true）；
log（'reviews'，reviews）；//记录正确数量的评论
})
}
函数renderReviews（）{
log（'renderReviews reviewsLoaded'，reviewsLoaded）；//为true
console.log（'renderReviews reviews-length'，reviews.length）；//为0
如果（已加载审阅）{
reviews.map（（数据）=>{
返回(

{data.name}
{data.position}


)
});
}
否则{
返回错误
}
}
useffect（（）=>{
getReviews（）；//这似乎在RenderView之前触发
}, []);
返回(

{renderReviews（）}

)
};
导出默认审核；

在这种情况下，上下文应该是有状态的。您当前的操作方式将不起作用，因为渲染上的上下文将始终恢复为空。您的

Provider

组件提供了

ReviewContext

，其模式应如下所示

import React，{createContext，useState}来自“React”
const ReviewContext=createContext（）
const ReviewProvider=（{children}）=>{
const[reviews，setReviews]=useState（[]）
返回(
setReviews（审查），
}}>
{儿童}
)
}
导出默认的ReviewProvider
导出{ReviewContext}

现在，您可以执行

const{reviews，setReviews}=useContext（ReviewContext）只要在上下文中更新评论时调用setReviews即可

事实上，我在文档中也找到了
 在给定的示例中，您不需要上下文。将
reviews
存储在状态，并在数据加载后调用
setReviews
。