Question

我对ComponentWillReceiveProps有很大的疑问。

会发生什么？ 我有三个组成部分，我将props从组件1 传递到组件2 ，并将其中的 2 传递给第3部分，实际使用的位置。.

基本上是：我将组件1 的props传递给组件3

在组件3中，我使用props对新闻ComponentWillReceiveProps进行了ajax调用。但是，当我通过props时，它将使多个ajax变为一个。

我不知道为什么。有人可以帮助我吗？

组件1：

render() {
    return ( 
    <Router>
      <Route exact path = "/"
      render = {
        (props) =>
        <Overview 
        { ...props}
         domainStatusFiltered = {
          this.state.domainStatusFiltered
        }
        subdomainStatusFiltered = {
          this.state.subdomainStatusFiltered
        }
        managerStatusFiltered = {
          this.state.managerStatusFiltered
        }
        countryStatusFiltered = {
          this.state.countryStatusFiltered
        }
        cityStatusFiltered = {
          this.state.cityStatusFiltered
        }
        squadNameStatusFiltered = {
          this.state.squadNameStatusFiltered
        }
        />} / >
      )
    }

组件2：

render(){
   return (
   <TwoColumnGrid>
     <Module className="mt-2" title="Team Status">
       <TeamStatus
         domainStatusFiltered={this.props.domainStatusFiltered}
         subdomainStatusFiltered={this.props.subdomainStatusFiltered}
         managerStatusFiltered={this.props.managerStatusFiltered}
         countryStatusFiltered={this.props.countryStatusFiltered}
         cityStatusFiltered={this.props.cityStatusFiltered}
         squadNameStatusFiltered={this.props.squadNameStatusFiltered} />
        </Module>
    </TwoColumnGrid>
  )
}

在组件3 中，我对登录的用户进行验证，并根据您的级别使用ajax：

componentWillReceiveProps(props) {
        const firstName = localStorage.getItem('nameLoggedUser');
        const lastName = localStorage.getItem('lastNameLoggedUser');
        const fullName = `${firstName} ${lastName}`.toLowerCase();

        const loggedUserIs = localStorage.getItem("user-role");

        if (loggedUserIs === 'full') {
            axios.get(`/api/squadsPeopleAll/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadNameStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    const getIds = res.data.map(i => i.id);
                    const people = Object.keys(getIds).length;

                    const getSquad = res.data.map(i => i.squad_name);
                    const unicSquads = Array.from(new Set(getSquad));

                    const squads = Object.keys(unicSquads).length;
                    this.setState({
                        people,
                        squads
                    })
                })
                .catch(err => console.log(err))

            axios.get(`/api/wfmskills/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        totalSkills: res.data.count,
                        loading: false
                    })
                })
            axios.get(`/api/notupdated/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        totalNotUpdated: res.data.count
                    })
                })
            axios.get(`/api/updated2017/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        updated2017: res.data.count
                    })
                })
            axios.get(`/api/updated2016/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        updated2016: res.data.count
                    })
                })
            axios.get(`/api/updated2018/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        updated2018: res.data.count
                    });
                })
        }

        if (loggedUserIs === 'L4') {
            axios.get(`/api/squadsPeopleManager/${fullName}/${this.state.cityStatusFiltered}/${this.state.countryStatusFiltered}/${this.state.squadNameStatusFiltered}/${this.state.domainStatusFiltered}/${this.state.subdomainStatusFiltered}`)
                .then(res => {
                    console.log(res.data)
                    const getIds = res.data.map(i => i.id);
                    const people = Object.keys(getIds).length;

                    const getSquad = res.data.map(i => i.squad_name);
                    const unicSquads = Array.from(new Set(getSquad));

                    const squads = Object.keys(unicSquads).length;
                    this.setState({
                        people,
                        squads
                    })
                })
                .catch(err => console.log(err))

            axios.get(`/api/wfmskills/manager/${fullName}`)
                .then(res => {
                    this.setState({
                        totalSkills: res.data.count
                    })
                })
            axios.get(`/api/notupdated/manager/${fullName}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        totalNotUpdated: res.data.count
                    })
                })
            axios.get(`/api/updated2017/manager/${fullName}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        updated2017: res.data.count
                    })
                })
            axios.get(`/api/updated2016/manager/${fullName}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        updated2016: res.data.count
                    })
                })
            axios.get(`/api/updated2018/manager/${fullName}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
                .then(res => {
                    this.setState({
                        updated2018: res.data.count
                    }, () => this.setState({
                        loading: false
                    }));
                })
        }
  }

例如，问题是：如果我从多个ajax调用中仅在subdomainStatusFiltered中提供setState并多次返回结果，则我进行了测试并将console.log ('test')进行了渲染有时，我不知道为什么，或者我使用了错误的方法，并且不知道它会重新渲染几次...我只想在更改某些状态时一次打电话，有人可以帮我吗，好吗？

Answer 1

您可以使用componentDidMount()

componentDidMount() {
    // here you can use your API calls with this.props
}

如果仍然要使用componentWillReceiveProps，则可以执行以下操作：

componentWillReceiveProps(nextProps) {
    if(!this.props.managerStatusFiltered && nextProps.managerStatusFiltered){
        // now you can use nextProps.managerStatusFiltered
    }
}

Answer 2

首先，您是否将props与nextProps进行比较以确保道具不同？ componentWillReceiveProps不保证道具有所不同。取而代之的是，每当您的组件需要重新渲染时，它将被调用。

其次，我认为最好的方法是将异步调用移到顶层组件，并将响应数据传递给需要它的子级。这样您就可以避免进行复杂的状态检查。

Answer 3

如果您希望事件在React组件的生命周期中发生一次且仅发生一次，则应使用componentDidMount。

请注意，componentWillReceiveProps是一种遗留生命周期方法，因此不应在新项目中使用。即将发布React 17时，此方法很快将仅带有UNSAFE_前缀。从react文档中：

UNSAFE_componentWillReceiveProps（nextProps）

注意：

使用这种生命周期方法通常会导致错误和不一致，   因此，将来会不推荐使用。

如果您需要执行副作用（例如，数据获取或   动画）以响应道具更改，请使用componentDidUpdate   生命周期。

ComponentWillReceiveProps提供多次调用。反应

3 个答案: