Hỏi về cách xử lý gọi lại 1 component từ chính nó react js?



  • Lúc đầu truy cập http://localhost:4000/v/G0TQ4MI trong link này có những bài viết liện quang khi bấm vào nó chuyển thành http://localhost:4000/v/RVua6dE do sử dụng cùng component nên hàm constructor không chạy nữa.

    constructor(props) {
            super(props);
            this.state = {
                post: {
                    _id: null,
                    titles: { vn: null },
                    images: null,
                    video: null,
                    upVote: null,
                },
                error: null,
                loadingUpload: false,
                charCount: 1000,
                textarea: '',
                comments: {
                    page: 1,
                    comments: null
                },
                sortComments: 1,
                replyId: null,
                replyOk: [],
                userVoteComments: null
            }
           
            this.replyId = this.replyId.bind(this);
            this.updateCommentPoint = this.updateCommentPoint.bind(this);
            this.fileUpload = React.createRef();
            this.getView = this.getView.bind(this);
            this.getView(); // lấy nội dung bài viết
    // đã thử bỏ this.getView trong componentDidMount() nhưng nó chạy hoài không ngừng
        }
    


  • Giải pháp của mình là dùng state lưu lại url hiện tại

    componentDidMount()
    {
        this.setState({
                slug: this.props.match.params.slug
    })
    }
      componentDidUpdate(){
           
            if(this.state.slug !== this.props.match.params.slug){
                         .... function cần thực hiện
    }
    })
    


  • Bạn dùng thử componentWillReceiveProps chưa.



  • @Nguyen-Hien củng thử nhưng vẫn phải dùng state để so sánh url trước và sau. vì khi nó đã mount rồi thì không chạy contructor nữa nên giá trị state đã lưu không thay đổi nên chỉ cần so sánh url mới với url đã lưu trong state là được



  • This post is deleted!


  • @Kha-Pham Nhưng nếu ông dùng react-router-dom thì sẽ có 1 props chưa info về state của url. Thì có nextProps =)).

    Flow tui thương làm là:

    ComponentWillReceiveProps(nextProps) -> get data from next props -> set state new data -> re-render :)).
    


  • @Nguyen-Hien thank bạn. Để mình làm thử theo cách bạn


Log in to reply