Question

---- Home.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，基于常规的promise的axios请求，但仍然收到无法更新未安装组件的反应状态的错误。如何不使用反应生命周期方法解决此问题

更新：我已经添加了所有需要的文件。我的问题是添加新帖子后，Home上没有任何内容（在提交时重定向到/ home）如果我刷新或直接转到“ / home”，它将按原样显示所有帖子。

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

0 个答案: