Resolve the problem that the same page cannot be re-rendered due to route parameter changes

componentDidMount(){
    this.getedata();
}
componentDidUpdate() { this.getedata(); } shouldComponentUpdate(nextProps, nextState) {shouldProps (props, nextState) {returnnextProps.match.params.id ! = this.props.match.params.id || nextState.newsdetails.news_id ! = this.state.newsdetails.news_id }getedata(){
        post('/news/list', {"page":1
        }).then(res => {
            this.setState({
                newslist:res.List
            },()=>{
                console.log("News list",this.state.newslist)
            })
            
        })

        post('/news/details', {"news_id":this.props.match.params.id*1
        }).then(res => {
            console.log("News Details",res)
            this.setState({
                newsdetails:res
            },()=>{
                console.log("News Details",this.state.newsdetails)
            })
            
        })
    }
Copy the code

2. If there is a parameter, the parameter is passed; if there is no parameter, the parameter is obtained from the URL

    updata(id){
        console.log("Method",id)
        this.props.history.push(`/dynamic/news/${id}`)
        this.getedata(id)
    }

    getedata(id) {
        post('/news/list', {
            "page": 1
        }).then(res => {
            this.setState({
                newslist: res.List
            })
        })

        post('/news/details', {
                "news_id": id
        }).then(res => {
            // console.log("News Details", res)
            this.setState({
                id: res.news_id,
                newsdetails: res,
                detailstime: res.created_at.split(' ')})})} // Request datacomponentDidMount() {
        this.getedata(this.props.match.params.id * 1);
    }
    
    
    
    {
        this.state.newslist.length > 0 && this.state.newslist.map((obj, index) => {
            // console.log('11', index)
            return <li key={index} className="main-right-show">
                {/* to={`/dynamic/news/${obj.news_id}`} * /} · · · · · · · · · · · · · · · · · · · · · call updata method and mass participation here (click on the corresponding current page id) · · · · · · · · · · · · · · · · · · · · · · · · < div key = {index} OnClick ={this.updata.bind(this,obj.news_id)}> {/* display inner title bar */} <div className="main-right-show-title">
                        <span className="main-right-show-title-time">{obj.created_at}</span>
                        <div className="main-right-show-title-line"></div>
                        <span className="main-right-show-title-word"> {obj. Tittle} < / span > < / div > {/ * exhibit internal news * /} < div className ="main-right-show-news" dangerouslySetInnerHTML={{ __html: decodeURI(obj.details).replace(/<[^>]+>/g, "") }}>
                    </div>
                </div>
            </li>
        })
    }
Copy the code