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的{{1}}传递给FinancesPage，但是用户数据是异步获取的。获取变量值后如何刷新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实现看起来不错。问题出在这段特定的代码中的NumberOfPurchasesComponent中：

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

假设在render的{{1}}方法中，您使用的是NumberOfPurchasesComponent而不是this.state.users。

this.props.users仅运行一次。现在，正如您提到的，数据是异步获取的，这意味着constructor最初在获得响应之前就已呈现。因此，它仅运行一次的NumberOfPurchasesComponent方法会将constructor状态设置为users。即使从[]更新了道具，由于FinancesPage中的渲染使用状态，也不会发生任何重新渲染。

尝试直接在NumberOfPurchasesComponent渲染中使用this.props.users，看看它是否有效。

Answer 3

根据 FinancesPage 页，代码库很好，但是问题是，如果没有对用户数据的任何操作，那么为什么要使用 setstate API调用。

因此无需设置setState即可直接将其作为直接传递

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

因此，每当API调用以获取响应时，此处的更新值就会传递给 NumberOfPurchasesComponent 类。

传递异步获取的属性

3 个答案: