IT技术 - componentWillReceiveProps 不触发 - 吾爱随笔录

componentWillReceiveProps 不触发

IT技术 reactjs react-jsx

2021-05-11 02:37:36

在我的其他课程中，componentWillReceiveProps 工作得很好，但由于某种原因，它没有在这里触发。

项目视图.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() 仅在 state 的属性变为 null 时触发，而不是在它设置时触发。( ((null --> entry) 不起作用，但 (entry --> null) 起作用)。

我错过了什么吗？谢谢！

- 编辑：

(null --> entry) 更新状态，但不调用日志或任何后续的 componentWillRecieveProps()。（但 entry --> null 确实如此。）

日志为空 --> 条目

输入日志 --> null

4个回答

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

如果其他人有这个问题......

componentWillReceiveProps如果您收到与以前完全相同的props，则不会被调用。您可以做的是添加一个虚拟props，每次您想要将相同的props发送到组件时都会进行迭代，以防组件内部以某种方式重置自身

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

这种方式componentWillRecieveProps每次都会触发。

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

我也有同样的问题。如果有人直接输入 url，则 componentwillreceiveprops 不会触发。我还必须重构我的代码才能让它全部工作。

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

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

我的默认路由是到我的 app.tsx 页面，其结构如下：render() {

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

}

其它你可能感兴趣的问题