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;
Share Improve this question asked Sep 27, 2018 at 17:37 Kevin HebertKevin Hebert 631 silver badge7 bronze badges 4
  • 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
Add a ment  | 

2 Answers 2

Reset to default 6

It’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