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 - ＆gt;条目）不起作用，但（entry - ＆gt; null）起作用。）

我错过了什么吗？谢谢！

- 编辑：

（null - ＆gt; entry）更新状态，但不调用日志或任何后续componentWillRecieveProps（）。（但是输入 - ＆gt; null确实。）

Logs for null --> entry

Logs for entry --> null

Answer 1

经过多次痛苦的调试后，我发现问题是ItemView被调用在一个模态（react-bootstrap）中，由于某种原因，它不支持componentWillReceiveProps（）。通过重构代码结束修复问题。谢谢你们！

Answer 2

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

如果您收到与以前相同的完全相同的道具，

componentWillReceiveProps将不被调用。您可以做些什么来解决它是添加一个虚拟道具，每当您想要将相同的道具发送到组件时，如果组件内部以某种方式重置自己，则会迭代

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

这样每次都会触发componentWillRecieveProps。

Answer 3

In my case my component was being re-created every render, so I had to put my logic in the constructor. I know its not ideal but it was a simple component and was easier for me to do than try to fix the issue that was causing the component to get re-created each time.

Answer 4

我也有同样的问题。如果有人输入直接URL，则componentwillreceiveprops不会触发。我不得不重构我的代码以使其全部工作。

我所做的更改是在我的初始index.tsx中有类似的东西（即将路由器作为外部元素）：

＆＃13;

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

＆＃13;

我的默认路线是我的app.tsx页面，其结构如下： render（）{

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

}

componentWillReceiveProps没有触发

4 个答案: