首页 > 解决方案 > React-Native componentWillRecieveProps 渲染问题

问题描述

在我的 RN 项目中,我想实现这一点。

// componentWillReceiveProps componentWillReceiveProps = async (nextProps) => { let { searchText, peopleTab } = this.props;

    let params = {};

    if (peopleTab !== nextProps.peopleTab) {
        params.peopleTab = nextProps.peopleTab;
    }

    // here i want to pass nextProps.searchText without a condition with the params like this.
    // params.searchText = nextProps.searchText

    if (Object.keys(params).length > 0) {
        await this.props.fetchUnfollowedPeople(params);
    }
}

如果有新值,我想发送带有 params 对象的 nextProps.searchText。否则我想用 params 对象发送 this.props.searchText 。

上面的代码,如果我取消注释

 // params.searchText = nextProps.searchText

它给出了无限循环。我怎样才能做到这一点?

标签: react-native

解决方案


设置let { searchText, peopleTab } = this.props;incomponentWillReceiveProps会导致粘贴新值

componentWillMount() {
   this.searchText = this.props.searchText ;
   this.peopleTab = this.props.peopleTab ;
}

componentWillReceiveProps = async (nextProps) => {

    const params = [];

    if (this.peopleTab !== nextProps.peopleTab) {
         params['peopleTab'] = nextProps.peopleTab ;
    }

    if (Object.keys(params).length > 0) {
        await this.props.fetchUnfollowedPeople(params);
    }
}

推荐阅读