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