道具被无理通过答案

【问题标题】：props getting passed irrationally道具被无理通过
【发布时间】：2021-12-28 08:30:36
【问题描述】：

我正在使用以下代码从 Firestore 获取和传递数据。我的 Firestore 集合中有四个数据。我能够获取所有四个，（我在控制台上检查了这个），但在 NewRecipe 组件中，只有第一个数据作为道具传递。不知道为什么其他三个数据没有作为道具传递。

这是我正在获取数据的组件：

const Home = () => {
  


  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsPending(true);

    projectFirestore
      .collection("recipes")
      .get()
      .then((snapshot) => {
        if (snapshot.empty) {
          setError("No recipes");

          setIsPending(false);
        } else {
          let result = [];
          snapshot.docs.forEach((doc) => {
            result.push({ id: doc.id, ...doc.data() });

            setData(result);
            setIsPending(false);
          });
        }
      })
      .catch((e) => {
        setError(e);
      });
  }, []);

  console.log("data", data);

  return (
    <div>
      {error && <div className="errors">{error}</div>}
      {isPending && <div className="Loading">Loading.......</div>}
      {data && <NewRecipe data={data} />}
    </div>
  );
};

export default Home;

这是我正在接收道具的 NewRecipe 组件

const NewRecipe = ({data}) => {

    console.log("data new recipe", data)


    return (
        <div className='recipe_list'>
 
        {data.map((item)=>{
            return (

            <div key={item.id} className='card'>
                <h3>{item.title}</h3>
                <p>it takes around {item.cookingTime}</p>
                <p>{item.method.substring(0,100)}</p>
                <Link to={`/recipes/ ${item.id}`}className='btn'> Read more</Link>
            </div>
        )})}
            
        </div>
         )
}

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

尝试将setPending(false) 放置在forEach 块之外（紧随其后）。

【讨论】：