投稿を編集、削除した時、表示されている投稿一覧画面を再描画したい

前提・実現したいこと

rails,reactを用いてアプリケーションを作成しています。

投稿を編集、削除した時、表示されている投稿一覧画面を再描画したいのですが実現できず困っています。

useContextなどを利用するともっと実装はスムーズに行えるのでしょうか？

どのように修正すれば良いのかご教授いただければ幸いです。。

該当のソースコード

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import PostCard from './PostCard';

const PostList = () => {

  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get("http://127.0.0.1:3001/posts/lists")
    .then((results) =>{
      setPosts(results.data);
      console.log(results.data);
    })
  },[]);

  return(
    <div className="post-wrap">
      <div className="post-list">
        {posts.map(post => {
          return(
            <PostCard key={post.id} post={post} />
          )}
        )}
      </div>
    </div>
  )
}

export default PostList

import React from 'react';
import styled from 'styled-components';
import PostEditModal from './PostEditModal';
import PostDeleteModal from './PostDeleteModal';

const PostCard = (props) => {
  return(
    <PostCardcss>
      <div className="post-image">image</div>

      <div className="post-header">
        <p className="post-title">{props.post.title}</p>
      </div>

      <div className="post-text">
        {props.post.description.length > 35 ?(
          <p>{props.post.description.substr(0, 35)}　[...]</p>
        ) : (
          <p>{props.post.description}</p>
        )
        }
      </div>

      <div className="post-footer">
        <p className="post-user">ユーザーネーム</p>
        <PostEditModal 
          id={props.post.id}
          title={props.post.title}
          description={props.post.description}/>
        <PostDeleteModal 
          id={props.post.id}/>
      </div>
    </PostCardcss>
  )
}

import React, { useState, useCallback } from 'react';
import clsx from 'clsx';
import styled from 'styled-components';
import Axios from 'axios';

const PostEditModal = (props) => {

  const [isModal, setIsModal] = useState(false),
        [title, setTitle] = useState(props.title),
        [description, setDescription] = useState(props.description);

  const inputTitle = useCallback((event) =>{
    setTitle(event.target.value)
  }, [setTitle])

  const inputDescription = useCallback((event) =>{
    setDescription(event.target.value)
  }, [setDescription])

  const submitEdit = () => {
    Axios.put(`http://127.0.0.1:3001/posts/${props.id}`,{
      title: title,
      description: description
    })
    .then(() => {
      console.log("Edited!")
      setIsModal(!isModal)
    })
    .catch(error => {
      console.log(error.response)
    });
  }

  return(
    <React.Fragment>

      <Navcss onClick={() => setIsModal(!isModal)}>編集</Navcss>

      {isModal && (
        <Modalcss>
          <div className="modal-mask" onClick={() => setIsModal(!isModal)}>
          </div>
          <div className="modal" >
            <p className="edit-post">編集</p>
            <div className="modal-message">
              <input className={clsx("form-input","new-post-title")} 
                name="title" value={title} 
                onChange={inputTitle}/>
              <textarea className={clsx("form-input","new-post-article")} 
                name="article" value={description} 
                onChange={inputDescription}/>
            </div>

            <div className="modal-button-wrap">
              <button className={clsx("button","modal-button")}
                onClick={() => submitEdit()}>完了</button>
              <button className={clsx("button","modal-button")}
                onClick={() => setIsModal(!isModal)}>キャンセル</button>
            </div>
          </div>
        </Modalcss>
      )}
    </React.Fragment>
  )
}

import React, { useState, useCallback } from 'react';
import clsx from 'clsx';
import styled from 'styled-components';
import Axios from 'axios';
import { useHistory } from 'react-router-dom';

const PostDeleteModal = (props) => {

  const [isModal, setIsModal] = useState(false);

  const submitDelete = () => {
    Axios.delete(`http://127.0.0.1:3001/posts/${props.id}`)
    .then(() => {
      console.log("Deleted!")
      setIsModal(!isModal)
    })
    .catch(error => {
      console.log(error)
    });
  }
  
  return(
    <React.Fragment>

      <Navcss onClick={() => setIsModal(!isModal)}>削除</Navcss>

      {isModal && (
        <Modalcss>
          <div className="modal-mask" onClick={() => setIsModal(!isModal)}>
          </div>
          <div className="modal" >
            <div className="modal-message">
              <div>投稿を削除しますか？</div>
            </div>
            <div className="modal-button-wrap">
              <button className={clsx("button","modal-button")}
                onClick={() => submitDelete()}>削除</button>
              <button className={clsx("button","modal-button")}
                onClick={() => setIsModal(!isModal)}>キャンセル</button>
            </div>
          </div>
        </Modalcss>
      )}
    </React.Fragment>
  )
}