Отображение данных из состояния

#reactjs #firebase #react-native #google-cloud-firestore

# #reactjs #firebase #реагировать-родной #google-облако-firestore

Вопрос:

Я взял данные из 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); :

1. Привет! Вы получаете какую-либо ошибку в консоли?

2. когда я запускаю это this.state.allVisit.forEach(element => { console.log(element.data()) // i see data, fields like => {user, info, visitAt} }); , я вижу данные. Мне просто нужно зациклить их на render

3. проверьте, что вы получаете из console.log(element.data())

4. Я загрузил на экран вопроса с консоли

Ответ №1:

Если я вижу хорошо, вы устанавливаете для состояния allVisit значение currentVisit, которое является одним объектом.

Либо ваше свойство allVisit в состоянии представляет собой массив с объектами visit внутри, либо просто примените currentVisit в состоянии как единый объект.

В то же время, вы зацикливаете один объект, если это то, чего вы пытаетесь достичь, удалите .info после [key], и у вас будет отображаться все ваше свойство

Если вы хотите перебирать вложенные объекты или массив объектов, предоставьте дополнительную информацию

Результат

Обновление, я попытаюсь угадать ваши данные, поэтому попробуйте использовать этот код

 
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>
    );
  }
}

1. когда я запустил это {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.

2. не могли бы вы, пожалуйста, зарегистрировать свой объект состояния после этого.setState({ allVisit: currentVisit }) и currentVisit пожалуйста

3. Я вижу, что здесь одна проблема stete = { allVisit: {} } ….. поэтому я меняю это на allVisit: []

4. Да, это имеет больше смысла, allVisit должен быть массивом visit , если это массив, который вы могли бы использовать только с помощью .map() , в противном случае, если у вас есть свойство состояния CurrentVisit с вложенным объектом visit, вам нужно использовать object.keys . дайте мне знать, как это происходит

5. когда я сделал то, что вы просили console.log(this.props.allVisit); в консоли, у меня есть undefined …. так что setState неверно, но почему?

Ответ №2:

Я сделал это на основе документов Google:

 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