Как автоматически обновить DOM или компонент при добавлении нового элемента в базу данных. Я использую React Hooks и Axios - PullRequest
Новая
       71

Как автоматически обновить DOM или компонент при добавлении нового элемента в базу данных. Я использую React Hooks и Axios

0 голосов
/ 21 ноября 2019

---- 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, обычные обещания, основанные на запросах axios, но все равно я получаю сообщение об ошибке, что не могу обновить состояние реакции неустановленного компонента. Как решить эту проблему, не используя методы жизненного цикла реакции

Я добавил все необходимые файлы. Моя проблема заключается в том, что после добавления нового сообщения ничто не отображается на Home (перенаправляет на / home при отправке). Если я обновлюсь или перейду непосредственно к «/ home», все сообщения будут отображаться так, как должно.

1 Ответ

0 голосов
/ 21 ноября 2019

измените ваш home.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()},[])

и затем добавьте getPosts () после того, как ваш handleSubmit () будет сделан

...