componentWillReceiveProps 未触发

Question

在我的其他课程中，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>
       );

    }
}

评论框.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 分配给它的数组。

componentWillReceiveProps() 仅在状态的属性变为 null 时触发，而不是在设置时触发。 （ (null --> entry) 不起作用，但 (entry --> null) 起作用）。

我错过了什么吗？谢谢！

-- 编辑：

(null --> entry) 更新状态，但不调用日志或任何后续 componentWillRecieveProps()。 （但 entry --> null 可以。）

Logs for null --> entry

Logs for entry --> null

Answer 1

经过痛苦的调试，我发现问题在于 ItemView 在模态（react-bootstrap）中被调用，由于某种原因，它不支持 componentWillReceiveProps()。最后通过重构代码解决了这个问题。谢谢大家！

Answer 2

我也有同样的问题。如果有人输入了直接 url，则 componentwillreceiveprops 不会触发。我还必须重构我的代码以使其全部正常工作。

我所做的更改是在我最初的 index.tsx 中具有类似的内容（即，将路由器作为外部元素）：

render( 
<Router history={hashHistory} >
{routes}
</Router>
, document.getElementById('root'));

我的默认路由是到我的 app.tsx 页面，其结构如下： 渲染（） {

return (
 <Provider store={store}>
   <div id="appContainer">
           {this.props.children}
   </div>
 </Provider>
);

}

Answer 3

如果其他人对此有疑问...

componentWillReceiveProps 将不会被调用，如果你收到 exact same 与以前一样的道具。你可以做些什么来解决它是添加一个虚拟道具，每次你想向组件发送相同的道具时都会迭代，以防组件内部以某种方式重置自己

click() {
    this.setState({counter: ++this.state.counter, unchangingProp:true})
}
<Component unchangingProp={this.state.unChangingProp} counter={this.state.counter}/>

这样componentWillRecieveProps每次都会被触发。

Answer 4

在我的情况下，每次渲染都会重新创建我的组件，因此我必须将我的逻辑放入构造函数中。我知道它并不理想，但它是一个简单的组件，并且比尝试解决导致每次重新创建组件的问题对我来说更容易做到。