显示来自状态的数据答案

【问题标题】：Display data from state显示来自状态的数据
【发布时间】：2020-11-20 14:34:48
【问题描述】：

我已从 firebase 获取数据并希望显示：

class DisplayVisit extends Component{
    state = {
        allVisit: [] //this I have changed        
    }

    componentDidMount(){
        this.getVisit();
    }

    getVisit = async() => {
        try {
            
           const currentVisit = await doctorvisit.get();
           this.setState({ allVisit: currentVisit })

           this.state.allVisit.forEach(element => {
               console.log(element.data()) // i see data, fields like => {user, info, visitAt}
          });
            
        } catch(error) {
            console.log('error getting visits ', error);           
        }
    }    

    render(){

        return(
            {Object.keys(this.state.allVisit).map(key => (
                <span>{this.state.allVisit[key].info}1</span>                                 
             ))}
        )   
    }
}

但是什么都没有渲染。

我也试过{key.info}，但没有渲染。

控制台屏幕：

来自console.log(this.state.allVisit);的日志：

【问题讨论】：

您好！您在控制台中收到任何错误吗？
当我运行这个this.state.allVisit.forEach(element => { console.log(element.data()) // i see data, fields like => {user, info, visitAt} }); 时，我看到了数据。我只需要将它们循环到render
筛选你从 console.log(element.data()) 获得的内容
我已从控制台上传到问题屏幕

标签： reactjs firebase react-native google-cloud-firestore

【解决方案1】：

如果我认为不错，您将状态 allVisit 设置为 currentVisit，这是一个单一对象。

你的 allVisit 属性要么是一个包含访问对象的数组，要么只是将 state 中的 currentVisit 作为单个对象应用。

与此同时，您正在循环单个对象，如果它是您想要实现的目标，请删除 [key] 之后的 .info 并且您将显示所有您的属性

如果您想遍历嵌套对象或对象数组，请提供更多信息

更新，我会尝试猜测您的数据，因此请尝试使用此代码


export default class DisplayVisit extends Component {
  state = {
    allVisit: [] //this I have changed
  };
  componentDidMount() {
    this.getVisit();
  }

  getVisit = async () => {
    try {
      const { docs } = await doctorvisit.get();
      
       //try this if first not working
      const allVisitsData = await doctor.visit.get()
 
      
      this.setState({ allVisit: docs });

      //try this if first not working
      //this.setState({ allVisit: allVisitData.docs });
      //or this

    } catch (error) {
      console.log("error getting visits ", error);
    }
  };

  render() {
    return (
      <div>
        {this.state.allVisit.map((visit) => (
          <span key={visit.info}>{visit.info} 1</span>
        ))}
      </div>
    );
  }
}

【讨论】：

当运行 {Object.keys(this.state.allVisit).map((key) => ( <p>{this.state.allVisit[key]}</p> ))} 我得到错误 = Error: Objects are not valid as a React child (found: object with keys {S_, D_, bf, metadata, query}). If you meant to render a collection of children, use an array instead.
能否请您在 this.setState({ allVisit: currentVisit }) 和 currentVisit 之后记录您的状态对象
我看到这里有一个问题 stete = { allVisit: {} }.....所以我将其更改为 allVisit: []
是的，它更有意义，allVisit 应该是一个访问数组，如果它是一个数组，你可以只使用 .map()，否则，如果你有一个带有嵌套访问对象的 CurrentVisit 状态属性你需要使用object.keys。让我知道进展如何
当你问console.log(this.props.allVisit); 进入控制台时我有undefined....所以 setState 是错误的，但是为什么？

【解决方案2】：

我是根据谷歌文档做的：

class DisplayVisit extends Component{
    state = {
        allVisit: [] 
    }

    componentDidMount(){
        this.getVisit();
    }

      getVisit = async() => {
        try {            
            await doctorvisit.get().then(querySnapshot => {
               const data = querySnapshot.docs.map(doc => doc.data());
               
               this.setState({allVisit : data});
           })            
        } catch(error) {
            console.log('error getting visits ', error);           
        }
    }
}

文档：

https://firebase.google.com/docs/firestore/query-data/get-data?hl=en

和博客/帖子：

https://rnfirebase.io/firestore/usage

【讨论】：

您可以添加您遵循的文档吗？