从 React 映射到 Firestore答案

【问题标题】：Mapping into firestore from React从 React 映射到 Firestore
【发布时间】：2021-09-14 01:37:58
【问题描述】：

我是 react 和 firebase/firestore 的新手。

我正在尝试映射到我认为是嵌套的 firestore 值。我可以单独提取每个值

function Pull() {

    const [blogs,setBlogs]=useState([])
  
    const fetchBlogs=async()=>{  
      const response=firestore.collection('customer');
  
      const data= await response.get();
  
      data.docs.forEach(item=>{
      setBlogs(data.docs.map(d => d.data()))
      console.log(data)
      })
    }
        
    useEffect(() => {
  
      fetchBlogs();
  
    }, [])
    return (
      <div className="App">
        {
            blogs.map((items)=>(
                <div>
                    <p>{items[1].name}</p>
                    
                </div>
            ))
        }
      </div>
    );
  }

我一直尝试映射两次以进入集合内的字符串，但我没有运气。

我的 FireStore 收藏

https://drive.google.com/file/d/1Erfi2CVrBSbWocQXGR5PB_ozgg9KEu12/view?usp=sharing

感谢您的宝贵时间！

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

如果您正在迭代 data.docs 数组并将多个状态更新入队，那么您将需要使用功能状态更新来正确入队，并从之前的状态更新。

const fetchBlogs = async ( )=> {
  const response = firestore.collection('customer');
  const data = await response.get();

  data.docs.forEach(item => {
    setBlogs(blogs => blogs.concat(item.data()))
  });
}

或者您可以将data.docs 映射到一个项目数组并更新一次状态。

const fetchBlogs = async ( )=> {
  const response = firestore.collection('customer');
  const data = await response.get();

  setBlogs(blogs => blogs.concat(data.docs.map(item => item.data())));
}

【讨论】：

这对我有用。这两个示例都有效，我选择了第一个，因为我正在排队多个状态更新。谢谢！
@ScottWalter 欢迎您！如果此答案解决/解决了您的问题/问题，那么我邀请您将其标记为已接受 (stackoverflow.com/help/someone-answers)。不要忘记对您在 stackoverflow 上找到的有用和/或有用的问题、答案和 cmets 进行投票。干杯，祝你好运。

【解决方案2】：

尝试将 foreach 更改为这样的快照：

data.docs.onSnapshot(snapshot=>{
  setBlogs(snapshot.docs.map(d => d.data()))
  console.log(data)
})

我在过去多次这样使用它它已经奏效了。如果它不起作用，Clever Programmer 在 youtube 上的 instagram 克隆教程会很好地解决这个问题。

【讨论】：