State已在componentWillReceiveProps中显示为已更新为新值。现在有办法检查道具变化吗？

Question

我试图在组件从其父级接收新道具时调用函数。

我在componentWillReceiveProps这样检查它

componentWillReceiveProps(nextProps){
    console.log('props urls length :',  nextProps.urls.length);
    console.log('state urls length :',  this.state.urls.length);

    if(nextProps.urls.length!= this.state.urls.length){
        console.log('new props in canvas in IF :',nextProps.urls);
        let urls = this.props.urls;
        let urlsOrder = [];
        urls.map((item)=>{
            let newItem = item.replace('http://172.104.60.70/st_old/uploads/tripdoc/split/','');
            if(nextProps.type === 'maildoc'||nextProps.type==='itinerary'||nextProps.item && nextProps.item.doctype === 'important' && nextProps.doctypes && nextProps.item.doctypes === 'emaildoc'){
                newItem = item.replace(' http://172.104.60.70/st_old/uploads/maildoc/split','');
            }else if(nextProps.type === 'agency'){
                newItem = item.replace('http://172.104.60.70/st_old/uploads/defaultdocs/7/split','');
            }else if(nextProps.type === 'clients'){
                newItem = item.replace('http://172.104.60.70/st_old/uploads/clientsdoc/split','');
            }
            urlsOrder.push(newItem);
        });
        this.setState({
            urlsOrder,
            urls:nextProps.urls
        });

        this.pdfConversion(nextProps.urls);
        setTimeout(nextProps.hideLoading(),2000);
    }
}

问题是在这些控制台日志中我可以清楚地看到值是相同的

console.log('props urls length :',  nextProps.urls.length);
console.log('state urls length :',  this.state.urls.length);

因此，我放的支票不起作用，它不会进入if声明。

我尝试过使用derivedStateFromProps，这也显示了类似的东西。

值相同，因此检查也不起作用。我的意思是道具显然会因为父组件发送新更新的数据而改变，但是为什么状态在这个子组件中自动改变？

请告诉我我哪里错了？

让我们说这是它应该如何表现然后请告诉我如何在道具或国家确实改变时调用某个功能？

这是我在componentDidUpdate中尝试的方法

 componentDidUpdate(prevProps,prevState){
        console.log('prevProps',prevProps);
        console.log('prevstate : ',prevState.urls.length);
        console.log('new props in canvas :',this.props.urls.length);
        if(prevState.urls.length!= this.props.urls.length){
            console.log('new props in canvas in IF :',this.props.urls);
            let urls = this.props.urls;
            let urlsOrder = [];
            urls.map((item)=>{
                let newItem = item.replace('http://172.104.60.70/st_old/uploads/tripdoc/split/','');
                if(this.props.type === 'maildoc'||this.props.type==='itinerary'||this.props.item && this.props.item.doctype === 'important' && this.props.item.doctypes && this.props.item.doctypes === 'emaildoc'){
                    newItem = item.replace(' http://172.104.60.70/st_old/uploads/maildoc/split','');
                }else if(this.props.type === 'agency'){
                    newItem = item.replace('http://172.104.60.70/st_old/uploads/defaultdocs/7/split','');
                }else if(this.props.type === 'clients'){
                    newItem = item.replace('http://172.104.60.70/st_old/uploads/clientsdoc/split','');
                }
                urlsOrder.push(newItem);
            });
            this.setState({
                urlsOrder,
                urls:this.props.urls
            });

            this.pdfConversion(this.props.urls);
        }
    }

Answer 1

我试图在组件从其父级接收新道具时调用函数。

这有机地导致渲染（更新）。尝试使用componentDidUpdate(prevProps, prevState, snapshot)

更新发生后立即调用componentDidUpdate（）。初始渲染不会调用此方法。

你有机会在这个生命周期钩子中比较this.props和prevProps，以及this.state和prevState。

值得一提的是componentWillReceiveProps will be deprecated与未来版本