admin管理员组文章数量:1318324
I implemented the ponentShouldUpdate in the code below to try and speed up performance. This goal was acplished, but now the ments don't render. Browser console shows that everything is being received, though. There's also a div that renders the number of ments and that is being updated as well.
class ProposalDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
sortedComments: []
};
}
ponentDidUpdate(prevProps) {
if((!prevProps.proposal || Object.keys(prevProps.proposal).length === 0 ) &&
this.props.proposal && Object.keys(this.props.proposal).length > 0 &&
this.props.proposal.status === 4 ){
prevProps.onFetchProposalVoteStatus(prevProps.token);
}
this.handleUpdateOfComments(prevProps, this.props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('thisProps', this.propsments)
console.log('nextProps', nextPropsments)
if (this.propsments === nextPropsments) {
return true
}
else {
return false
}
}
ponentDidMount() {
this.props.onFetchLikedComments(this.props.token);
}
ponentWillUnmount() {
this.props.resetLastSubmittedProposal();
}
handleUpdateOfComments = (currentProps, nextProps) => {
let sortedComments;
if(!nextPropsments || nextPropsments.length === 0) {
return;
}
// sort option changed
if(currentPropsmentsSortOption !== nextPropsmentsSortOption) {
sortedComments = updateSortedComments(
this.state.sortedComments,
nextPropsmentsSortOption
);
}
// new ment added
if(currentPropsments.length !== nextPropsments.length) {
const isEmpty = currentPropsments.length === 0;
const newComments = isEmpty ?
nextPropsments :
[nextPropsments[nextPropsments.length - 1]]
.concat(this.state.sortedComments);
sortedComments = updateSortedComments(
newComments,
currentPropsmentsSortOption,
nextPropsmentsvotes,
isEmpty
);
}
// usernames aren't fully merged into ments
const mentWithoutAnUsername = ments => ments.filter(c => !c.username)[0];
if (mentWithoutAnUsername(this.state.sortedComments) && !mentWithoutAnUsername(nextPropsments)) {
sortedComments = updateSortedComments(
nextPropsments,
currentPropsmentsSortOption,
nextPropsmentsvotes,
false
);
}
// mentsvotes changed
if(nextPropsmentsvotes && !isEqual(currentPropsmentsvotes, nextPropsmentsvotes)) {
const updatedComments = getUpdatedComments(nextPropsmentsvotes, nextPropsments);
const newComments = mergeNewComments(this.state.sortedComments, updatedComments);
sortedComments = updateSortedComments(
newComments,
currentPropsmentsSortOption,
nextPropsmentsvotes,
false
);
}
// ment gets censored
if(nextProps.censoredComment && !isEqual(currentProps.censoredComment, nextProps.censoredComment)) {
sortedComments = updateSortedComments(
nextPropsments,
currentPropsmentsSortOption,
nextPropsmentsvotes,
true
);
}
if(sortedComments) {
this.setState({ sortedComments });
console.log('setState', this.state.sortedComments);
}
}
render() {
const {
isLoading,
proposal,
token,
error,
markdownFile,
otherFiles,
onFetchData,
...props
} = this.props;
console.log(this.props);
const ments = this.state.sortedComments;
return (
<div className="content" role="main">
<div className="page proposal-page">
{error ? (
<Message
type="error"
header="Proposal not found"
body={error} />
) : (
<Content {...{
isLoading,
error,
bodyClassName: "single-page ments-page",
onFetchData: () => onFetchData(token),
listings: isLoading ? [] : [
{
allChildren: [{
kind: "t3",
data: {
...proposalToT3(proposal, 0).data,
otherFiles,
selftext: markdownFile ? getTextFromIndexMd(markdownFile) : null,
selftext_html: markdownFile ? getTextFromIndexMd(markdownFile) : null
}
}]
},
{ allChildren: mentsToT1(ments) }
],
...props
}} />
)}
</div>
</div>
);
}
}
export default ProposalDetail;
I implemented the ponentShouldUpdate in the code below to try and speed up performance. This goal was acplished, but now the ments don't render. Browser console shows that everything is being received, though. There's also a div that renders the number of ments and that is being updated as well.
class ProposalDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
sortedComments: []
};
}
ponentDidUpdate(prevProps) {
if((!prevProps.proposal || Object.keys(prevProps.proposal).length === 0 ) &&
this.props.proposal && Object.keys(this.props.proposal).length > 0 &&
this.props.proposal.status === 4 ){
prevProps.onFetchProposalVoteStatus(prevProps.token);
}
this.handleUpdateOfComments(prevProps, this.props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('thisProps', this.props.ments)
console.log('nextProps', nextProps.ments)
if (this.props.ments === nextProps.ments) {
return true
}
else {
return false
}
}
ponentDidMount() {
this.props.onFetchLikedComments(this.props.token);
}
ponentWillUnmount() {
this.props.resetLastSubmittedProposal();
}
handleUpdateOfComments = (currentProps, nextProps) => {
let sortedComments;
if(!nextProps.ments || nextProps.ments.length === 0) {
return;
}
// sort option changed
if(currentProps.mentsSortOption !== nextProps.mentsSortOption) {
sortedComments = updateSortedComments(
this.state.sortedComments,
nextProps.mentsSortOption
);
}
// new ment added
if(currentProps.ments.length !== nextProps.ments.length) {
const isEmpty = currentProps.ments.length === 0;
const newComments = isEmpty ?
nextProps.ments :
[nextProps.ments[nextProps.ments.length - 1]]
.concat(this.state.sortedComments);
sortedComments = updateSortedComments(
newComments,
currentProps.mentsSortOption,
nextProps.mentsvotes,
isEmpty
);
}
// usernames aren't fully merged into ments
const mentWithoutAnUsername = ments => ments.filter(c => !c.username)[0];
if (mentWithoutAnUsername(this.state.sortedComments) && !mentWithoutAnUsername(nextProps.ments)) {
sortedComments = updateSortedComments(
nextProps.ments,
currentProps.mentsSortOption,
nextProps.mentsvotes,
false
);
}
// mentsvotes changed
if(nextProps.mentsvotes && !isEqual(currentProps.mentsvotes, nextProps.mentsvotes)) {
const updatedComments = getUpdatedComments(nextProps.mentsvotes, nextProps.ments);
const newComments = mergeNewComments(this.state.sortedComments, updatedComments);
sortedComments = updateSortedComments(
newComments,
currentProps.mentsSortOption,
nextProps.mentsvotes,
false
);
}
// ment gets censored
if(nextProps.censoredComment && !isEqual(currentProps.censoredComment, nextProps.censoredComment)) {
sortedComments = updateSortedComments(
nextProps.ments,
currentProps.mentsSortOption,
nextProps.mentsvotes,
true
);
}
if(sortedComments) {
this.setState({ sortedComments });
console.log('setState', this.state.sortedComments);
}
}
render() {
const {
isLoading,
proposal,
token,
error,
markdownFile,
otherFiles,
onFetchData,
...props
} = this.props;
console.log(this.props);
const ments = this.state.sortedComments;
return (
<div className="content" role="main">
<div className="page proposal-page">
{error ? (
<Message
type="error"
header="Proposal not found"
body={error} />
) : (
<Content {...{
isLoading,
error,
bodyClassName: "single-page ments-page",
onFetchData: () => onFetchData(token),
listings: isLoading ? [] : [
{
allChildren: [{
kind: "t3",
data: {
...proposalToT3(proposal, 0).data,
otherFiles,
selftext: markdownFile ? getTextFromIndexMd(markdownFile) : null,
selftext_html: markdownFile ? getTextFromIndexMd(markdownFile) : null
}
}]
},
{ allChildren: mentsToT1(ments) }
],
...props
}} />
)}
</div>
</div>
);
}
}
export default ProposalDetail;
- 2 You are checking for equality between two different objects. Though the contents of nextProps.ments and this.props.ments may be the same, they point to a different object. Find a way to check their contents. – Alex G Commented Sep 27, 2018 at 17:44
- it may be helpful to put your code into a sandbox like stackblitz. – David Chase Commented Sep 27, 2018 at 17:44
- Hmmm okay I never thought about the accessing the contents. I just tried adding .length (since ments is an array) but still no avail. Any other ideas why adding ponentShouldUpdate would make the ments not render? – Kevin Hebert Commented Sep 27, 2018 at 17:50
- Could you add the structure of a ment? – Alex G Commented Sep 27, 2018 at 17:57
2 Answers
Reset to default 6It’s not ponentShouldUpdate but shouldComponentUpdate
shouldComponentUpdate basically decide whether the ponent requires re rendering or not. This method either returns true or false only. By default this method returns true which means the ponent needs re rendering always whenever setState happens or props received irrespective of the state and props parison.
So in your case you are paring ments incorrectly in shouldComponentUpdate. You need to return true only when current props and previous props are not equal otherwise false but you are checking vice versa.
The below code would work
shouldComponentUpdate(nextProps, nextState) {
console.log('thisProps', this.props.ments)
console.log('nextProps', nextProps.ments)
if (JSON.stringify(this.props.ments) !== JSON.stringify(nextProps.ments)) {
return true
}
else {
return false
}
}
Try this:
JSON.stringify(this.props.ments) === JSON.stringify(nextProps.ments)
This dirty hack could help.
The problem is that you cannot pare two arrays in such a way you do.
本文标签： javascriptWhy is ComponentShouldUpdate preventing Comments from RenderingStack Overflow
版权声明：本文标题：javascript - Why is ComponentShouldUpdate preventing Comments from Rendering? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742034280a2417043.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论