Question

我正在用React构建一个博客网站，在主页上我们可以找到帖子列表，当用户单击该帖子时，他可以看到并阅读该帖子和评论等...，我认为就像这个网站（stackoverflow）一样，您可以在其中看到问题列表，因此，单击其中一个，您将看到完整的问题。
此时一切都很好，但是因此我刷新了丢失的页面数据，为此，我尝试使用本地存储，而在使用本地存储之后，我刷新了页面=>数据持久存在，那很好。现在的问题是，当我返回首页并单击另一篇文章时，它每次都会显示同一篇文章，这是由于本地存储没有更新。
我的问题：如何更新本地存储，因此我单击了其他帖子。

代码不正确：

Home.js：

import './Home.css';
import {Link} from 'react-router-dom';
import {Button} from 'react-bootstrap';
import Posts from '../Posts/Posts';


class Home extends React.Component{
constructor(props){
    super(props);
    this.state={
        arrayposts:[],

    }
}

getposts=()=>{
fetch('http://localhost:3002/')
  .then(response=>response.json())
  .then(data=>{
    console.log(data)
 this.setState({arrayposts:data});
  }).catch(err=>console.log("can't get posts"))

}


componentDidMount(){
    this.getposts();
}

render()
{
const {arrayposts}=this.state;
return(
<div >
<div className='topquestion' >
<h4>Top Questions</h4>
<Link to={'/Askquestion'}><Button id='askbtn'>Ask Question</Button></Link>
</div>

{
  arrayposts.map((post,i)=>{
  return (
<Posts 
key={i}
postcontent={arrayposts[i].postcontent}
postid={arrayposts[i].id}
title={arrayposts[i].title}
postdate={arrayposts[i].postdate}
/>
        );
 })
}



</div>
    );
}

}

export default Home;

Post.js：

import React from 'react';
import './Posts.css';
import {Link} from 'react-router-dom';

class Posts extends React.Component{

constructor(props){
    super(props);
    this.state={
    title:this.props.title,
    postid:this.props.postid,
  content:this.props.postcontent,
  postdate:this.props.postdate
    }
}

render()
{
const {postcontent,title,postdate,postid}=this.props 

return(

<div className='post'>
<Link id='title' to={{
    pathname: "/Articles",
    postcontent:postcontent,
    postid:postid,
    title:title
  }}>{title}  </Link>

<div className='reaction'>

<div id='like'><img alt='' src={require('./like.png')}width='24' height='24'/>reactions</div>
<div id='comment'><img alt='' src={require('./comment.png')}width='24' height='24'/>Add comment</div>

</div>
</div>

    );
}

}
export default Posts;

Article.js：

import React from 'react';
import './Articles.css' ;
import {Link } from 'react-router-dom';
import localstorage from 'local-storage';

class Articles extends React.Component{

constructor(props){
  super(props);
  this.state={
    title:'',
    comment:'',
    postid:this.props.location.postid,
    arraycomments:[],
    postcontent:this.props.location.postcontent
  }
}

onchangecomment=(event)=>{
this.setState({comment:event.target.value});
}


addcomment=()=>{
  fetch('http://localhost:3002/Addcomment',{
    method:'post',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({
    comment:this.state.comment,
    postid:this.state.postid
    })
  }).then(resposne=>{})
  .catch(err=>{console.log('not added from the quesiotns')})
   document.getElementById('txtarea').value='';
}

getcomments=()=>{
  fetch('http://localhost:3002/getcomment',{
    method:'post',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({
    postid:this.state.postid
    })
  })
  .then(response=>response.json())
  .then(response=>{
    console.log(response)
    this.setState({arraycomments:response})
  })
  .catch(err=>{console.log('not getting ')})

}

componentWillMount(){
localstorage.get('postid') && this.setState({postid:JSON.parse(localstorage.get('postid'))})
localstorage.get('postcontent') && this.setState({postcontent:JSON.parse(localstorage.get('postcontent'))})
localstorage.get('arraycomments') && this.setState({arraycomments:JSON.parse(localstorage.get('arraycomments'))})
localstorage.get('title') && this.setState({title:JSON.parse(localstorage.get('title'))})

}



componentDidMount(){
  this.getcomments();
}


componentWillUpdate(nextProps,nextState){
localstorage.set('postid',JSON.stringify(nextState.postid));
localstorage.set('postcontent',JSON.stringify(nextState.postcontent));
localstorage.set('arraycomments',JSON.stringify(nextState.arraycomments));
localstorage.set('title',JSON.stringify(nextState.title));
}

render()
{
const {postcontent}=this.state;

return(
<div className='article'>
<div dangerouslySetInnerHTML={{ __html:postcontent }} />
<h4>Discussion</h4>
<div className='submitcommentform'>

<textarea id='txtarea' placeholder='Add discussion'  
onChange={this.onchangecomment} 
style={{height:'127px', width:'687px',padding:'6px 6px'}}>
</textarea>
<div className='submit-wrapper-actions'>
<Link to='' ><img className='wrapperimgage' src='https://practicaldev-herokuapp-com.freetls.fastly.net/assets/info-b2ce6a88ddd367e1416cd4c05aab2edee2d0b2c355d7b2aae1821eec48014e11.svg' height='21px'/></Link>
<Link to='' ><img className='wrapperimgage' src='https://practicaldev-herokuapp-com.freetls.fastly.net/assets/image-upload-f5242154f76102fa8869623b3d54adbeecbf24989ba8546e4f8ce229acec2c82.svg' height='21px'/></Link>
<button id='btnsubmit'onClick={this.addcomment}>Submit</button>
</div>
</div>

<div>
{
 this.state.arraycomments.map((post,i)=>{
  return (
   <div className='commentsection' key={i}>{post.comm_content}</div>
      );
 })
}
</div>
</div>

  );

}

}

export default Articles;

我希望我的问题很清楚。

本地存储未更新react js

0 个答案: