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>
       );

    }
}

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

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 将不会如果您收到与以前 完全相同的 道具。你可以做的是添加一个虚拟道具，每次你想将相同的道具发送到组件时都会迭代，以防组件内部以某种方式重置自身

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

这样componentWillRecieveProps每次都会触发

Answer 4

在我的例子中，我的组件在每次渲染时都被重新创建，所以我不得不将我的逻辑放在构造函数中。我知道它并不理想，但它是一个简单的组件，对我来说比尝试修复导致组件每次都重新创建的问题更容易。

componentWillReceiveProps 未触发

componentWillReceiveProps not firing

reactjs

react-jsx