Реагировать на обратный вызов Firebase

Question

Я начал изучать React с использованием Firebase около года назад, и, думаю, все идет хорошо. Однако с тех пор, как я начал писать, я действительно скучаю по искусству обратного вызова, как я это делал со Swift.

Я чувствую, что едва ли есть какая-либо информация, касающаяся обратных вызовов и Firebase с использованием React. Например, я очень часто хотел использовать обратные вызовы, но в итоге написал множество дополнительных функций для выполнения одной и той же задачи. Например, я хочу иметь возможность вызывать функцию, а затем возвращать значение в Snapshot.once. Но как?

Видите ли, это пример проблемы, с которой я сталкиваюсь в данный момент. В настоящее время я планирую список пользователей на моем веб-сайте со следующей информацией: имя, фамилия и companyId. При отображении я хочу убедиться, что companyId действительно существует в отдельной таблице под названием «Компании», структурированной так:

Компании -> uniqueCompanyId -> Информация

Я знаю, что не могу вернуть значения в асинхронной функции, но вот о чем я думаю:

isCompanyVerified(input){
  databaseCompanies.child(input).once('value', (snapshot) => {
     if(snapshot.val().isVerified){
       return true;
     } else {
       return false;
     }
  })
}

<div>
allUsers.map((singleUser) => {
  return(
    <p>{singleUser.name}</p>
    <p>{this.isCompanyVerified(singleUser.companyId)}</p>
  )
})
</div>

Это действительно означало бы для меня мир, если бы кто-то мог объяснить мне, как я буду делать это правильным образом, или, по крайней мере, указать мне правильное направление. Проблема в том, что я, честно говоря, не знаю, где искать информацию.

Я привык структурировать код так, чтобы все сетевые функции / функции базы данных были в одном файле, как я это делал в Swift под названием ex. 'Networking.swift. А затем выполните вызовы функций, которые я получаю из определенного файла. Используя React, я получил весь свой код в каждом Компоненте, в результате чего было много дублированного кода, много дополнительной работы и все это выглядело неструктурированным.

Я довольно знаком с синтаксисом прямо сейчас, и я верю, что я многому научился, но я чувствую, что делаю множество вещей неправильно, и мне еще многому нужно научиться. Где было бы лучшее место для меня, чтобы научиться действительно осваивать React? Переход от среднего уровня к «опытному» (написание и структурирование кода React, как это должно быть сделано).

Вся помощь приветствуется. Я делаю этот пост, как я действительно хочу приложить усилия, чтобы учиться.

Answer 1

Вы не можете напрямую написать дом в реакции, как это.Дом не перерисовывается в этом случае.Сохраните данные проверки в состоянии, и dom будет перерисован, как только будут получены асинхронные данные.

РЕШЕНИЕ 1

Это реализация одного UserItem компонента:

UserItem.js

class UserItem extends React.Component {
  state {
    isUserVerified: false
  }

  handleVerified = snapshot => {
    this.setState({ isUserVerified: snapshot.val().isVerified })
  }

  componentDidMount {
    const {userId} = this.props;
    databaseCompanies.child(userId).once('value', this.handleVerified)
  }

  render() {
    const { isUserVerified } = this.state;

    return (
     <div>{isUserVerified ? 'verified' : 'not verified'}</div>
    )
  }
}

UserList.js

...
render(){
  allUsers.map(singleUser => <UserItem userId={singleUser.id} />
}

РЕШЕНИЕ 2

Если вы хотите перечислить всех пользователей , получите снимок от всех пользователейобъект

componentDidMount {
  databaseCompanies.child('users').once('value', this.handleStoreUsers)
}

Это приведет к чему-то вроде этого в состоянии:

state = {
  users: {
    _key1: { id..., verified: true },
    _key2: { id..., verified: false }
   ...
  }
}

И карту через них.