小编典典

componentWillReceiveProps不触发

reactjs

在我的其他课程中,componentWillReceiveProps运行良好,但是由于某种原因,它在这里没有触发。

ItemView.jsx

class ItemView extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: null, 
            rating: null, 
            sector: null, 
            location: null, 
            description: null, 
            image: "blank.png",
            show: false
       };
    }

    ...

    componentWillReceiveProps(nextProps) {

        if(!nextProps.companyToRender) {
            this.setState({
                name: null, 
                rating: null, 
                sector: null, 
                location: null, 
                description: null, 
                image: "blank.png",
                show: false
            });
       }
       else {
           var companyToRender = nextProps.companyToRender;

           this.setState({
               name: companyToRender.name, 
               rating: companyToRender.rating, 
               sector: companyToRender.sector, 
               location: companyToRender.location, 
               description: companyToRender.description, 
               image: companyToRender.image,
               show: true
           });
    }

    ...

    render () {
       return(
        <div>
         ...
        <CommentBox show={this.state.show} companyToRender={this.state.name}/>
         ...
        </div>
       );

    }
}

CommentBox.jsx

class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {companyToRender: null};
    }

    componentWillReceiveProps(nextProps) {
        this.setState({companyToRender: nextProps.companyToRender});
    }

    ...
}

如果不传递任何内容,则传递给itemView的prop为null,或者ItemView为其分配的数组。

仅当状态的属性为null时,componentWillReceiveProps()才会触发,而当状态为null时,组件不会触发。((null->条目)不起作用,但是(entry->
null)起作用)。

我错过了什么吗?谢谢!

-编辑:

(空->条目)更新状态,但不调用日志或任何后续componentWillRecieveProps()。(但是输入-> null会。)

记录为null->条目

输入日志-> null


阅读 769

收藏
2020-07-22

共1个答案

小编典典

经过大量痛苦的调试之后,我发现问题在于在某种模式(react-
bootstrap)内调用了ItemView,该模式出于某种原因不支持componentWillReceiveProps()。最终通过重构代码解决了该问题。多谢你们!

2020-07-22