Reactjs 在使用useffect和mongodb作为后端时，如何在React中添加新帖子后呈现更新的组件

----Home.js----

---Post.js---

const DispTag=（{tag}）=>{
返回(
#{tag}
)
}
常量Post=（{postObj}）=>{
console.log（postObj）
返回(
{postObj['tags'].map（tag=>）}
) 
}

---App.js---

const-App=（）=>{
返回(
}/>
}/>
);
}

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

更新：我已经添加了所有需要的文件。我的问题是，添加新帖子后，主页上没有呈现任何内容（提交时重定向到/Home）

---

如果我刷新或直接转到“/home”，它将显示所有文章。

您的问题缺少太多的部分。我可以知道缺少什么吗？我可以解释它是如何工作的。有“/”（addpost）路线和“/home”路线。只有addpost在应用程序上呈现，当一个新帖子与图像一起添加时，它会向存储在数据库中的api生成一个axios帖子，当我单击addpost时，它会路由到“/home”，但它是空的，基本上没有显示任何内容。Home component使用useffect和axios Get显示所有帖子。您正在询问

如何渲染更新的组件…

，因此您应该显示如何渲染组件。您还说，

我得到了一个错误，我无法更新未安装组件的react状态，但您忘了告诉我错误发生在哪里。您发布了两个文件，
Home.js
和
AddPost.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>
    )


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)
    })
}

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>
) 
}

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