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和将来的版本

状态已在componentWillReceiveProps中显示为已更新为新值。现在有没有办法检查道具的变化？

1 个答案: