如何在将新项添加到数据库时自动更新 DOM 或组件。我正在使用 React Hooks 和 axios

Question

-------主页.js.-

const Home=(props)=>
{
const[posts,setPosts]=useState([])
const [isLoaded,setLoad]=useState(false)
useEffect(()=>{
const getPosts = async ()=>{
setLoad(true)
const response =await axios.get('http://localhost:3001/posts')
let post_list=response.data
setPosts(post_list)
}
getPosts())}
return(
<div>
{/* <h1>Welcome {userID}</h1> */}
<div>
{isLoaded?posts.map(post=>(
<Post postObj={post} key={post._id}/>
)):"Wall is loading"}
</div>
</div>
)
----AddPost.js----
const handleSubmit=(e)=>{
e.preventDefault()
axios.post('http://localhost:3001/addpost',postObj).catch(err=>console.log(err)).then(response=>{
const resp=response.data.resp
console.log(resp)
setPost({
img:'',
tags:[],
location:''
})
setTag('')
setDonePost(true)
})
}

---Post.js-

const DispTag=({tag})=>{
return(
<span>#{tag} </span>
)
}
const Post=({postObj})=>{
console.log(postObj)
return(
<div>
<div>
{postObj['tags'].map(tag=><DispTag key={tag} tag={tag}/>)}
</div>
<img width="400" height="400" alt="" src={postObj.img}></img>
</div>
) 
}

---App.js-

const App=()=>{
return (
<div>
<Router>
<Route path ='/home' render={()=><Home/>}/>
<Route exact path='/' render={()=><AddPost/>}/>
</Router>
</div>
);
}

我尝试过使用useLayoutEffect，这是一种基于承诺的axios请求，但我仍然收到错误，无法更新未安装组件的反应状态。如何在不使用反应生命周期方法的情况下解决此问题

我已经添加了所有需要的文件。我的问题是，添加新帖子后，主页上没有任何内容(提交时重定向到/Home(。如果我刷新或直接转到"/Home"，它会显示所有帖子。

Answer 1

更改您的主页.js

const getPosts = async ()=>{
setLoad(true)
const response =await axios.get('http://localhost:3001/posts')
let post_list=response.data
setPosts(post_list)}
useEffect(()=>{
getPosts()},[])

然后在handleSubmit((完成后添加getPosts((