Передача недвижимости осуществляется асинхронно

Question

У меня есть этот код:

export default class FinancesPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {users: []};
    }
    componentWillMount() {
    firebase.database().ref('Users').orderByChild('transactions').startAt(1).on('value', snap => {
            const users = arrayFromObject(snap.val());
            this.setState({users: users});
        });
    }
    render() {
        return (
            <div>
                <NumberOfPurchasesComponent users={this.state.users}/>
            </div>
        )
    }
}

И этот код:

export default class NumberOfPurchasesComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {users: this.props.users};
    }
    componentWillMount() {

        const users = this.state.users;

        // Do stuff here    
    }
    render() {
        return (
            {/*And render stuff here*/}
        );
    }
}

Что происходит сейчас: родительский элемент FinancesPage передает пустой массив users вребенок NumberOfPurchasesComponent.Мне нужно, чтобы он передавал новое значение массива каждый раз, когда происходит обновление.

И я хочу передать users из FinancesPage в NumberOfPurchasesComponent, но данные пользователей получаются асинхронными.Как сделать обновление NumberOfPurchasesComponent при получении значения переменной?

Answer 1

Вы пытались использовать componentWillReceiveProps?Я имею в виду что-то вроде:

export default class NumberOfPurchasesComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state={users: []}
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.users && nextProps.users!==this.state.users){
      this.setState({
        users: nextProps.users
      })
    }
  }

  render() {
      return (
          {/*And render stuff here*/}
      );
  }
}

Таким образом, компонент знает, когда он должен выполнить повторную визуализацию.

Answer 2

На странице FinancesPage все хорошо с кодовой базой, но проблема в том, почему вы делаете setstate , если нет никаких манипуляций с данными пользователя, полученными из вызова API.

Поэтому, не задавая setState, просто передайте его как прямой

 render() {
        return (
            <div>
                <NumberOfPurchasesComponent users={this.props.users}/>
            </div>
        )
    }

, поэтому всякий раз, когда API вызывает запрос для получения ответа, здесь значение обновления передается в NumberOfPurchasesComponent класс.

Answer 3

Реализация FinancesPage выглядит хорошо.Проблема заключается в NumberOfPurchasesComponent в этом конкретном фрагменте кода:

constructor(props) {
    super(props);
    this.state = {users: this.props.users};
}

Я предполагаю, что в render методе NumberOfPurchasesComponent вы используете this.state.users вместо this.props.users.

constructor запускается только один раз.Теперь, как вы упомянули, данные извлекаются асинхронно, что означает, что NumberOfPurchasesComponent изначально отображается даже до получения ответа.Следовательно, его метод constructor, который выполняется только один раз, устанавливает состояние users на [].Даже если реквизиты обновляются с FinancesPage, поскольку при рендеринге в NumberOfPurchasesComponent используется состояние, повторного рендеринга не происходит.

Попробуйте использовать this.props.users непосредственно при NumberOfPurchasesComponent рендере и посмотрите, работает ли он.