added data don't update automatically in useEffect() Need refresh browser to get the last addition

I have a trouble in small app. I have one component that add data to db. Works well. In other component I fetch the data inside useEffect() and make a search from db. As well works well. The two components are returned in my App.js. The problem is that when I add data and go to search I need to refresh the page for search the last adding. So if I don’t refresh the page it doesn’t find it. How to solve this? (a bit explained if possible) 🙂

From component Search.js

 useEffect(()=>{
        axios.get("http://localhost:3004/api/list/").then(resp=>{
            console.log(resp.data)
            setList(resp.data) ;
        })
    },[])

From component

const AddData = () =>{
    const [name, setName] = useState();
    const [tel, setTel] = useState();
    const [gender, setGender] = useState();
    
    const dispatch = useDispatch();


    const handleSubmit = (e) => {
        e.preventDefault();
        // starting to work to save input to DB via API 
        //  dispatch(addList(name,tel,gender));
        dispatch(addList(name,tel,gender))
    }
    return(
    ```
    

79 thoughts on “added data don't update automatically in useEffect() Need refresh browser to get the last addition”

  1. I don’t know if it’s just me or if perhaps everyone else experiencing
    issues with your site. It looks like some of the written text within your
    content are running off the screen. Can somebody else please provide
    feedback and let me know if this is happening to them as well?
    This could be a issue with my browser because I’ve
    had this happen previously. Cheers http://droga5.net/

    Reply

Leave a Comment