how to fix random GET /%3Canonymous%3E 404 error messages

Viewed 446

The HTTP request works as expected but I see an additional request to /%3Canonymous%3E that returns 404. This is causing the following error in Redux: TypeError: Cannot read property 'map' of undefined my reducer looks like this

export const getPostsReducer = (state={posts:[]}, action)=>{

    switch(action.type){
        case POST_UPLOAD_START:
            return{
                isLoading:true,
                posts:[],
            };
            case POST_UPLOAD_SUCCESS:
            return{
                isLoading:false,
                posts:action.payload.posts,
                pages: action.payload.pages,
                page:action.payload.page
            };
        case POST_UPLOAD_FAILURE:
            return{
                isLoading:false,
                error:action.payload
            };
        default:
            return state
    }
}

my actions file

export const listPosts = (keyword = '', pageNumber='') => async(dispatch)=>{

    try{
        dispatch({type: POST_UPLOAD_START})
        const {data} = await axios.get(`/api/posts?keyword=${keyword}&pageNumber=${pageNumber}`)
        console.log(data)
        dispatch({
            type:POST_UPLOAD_SUCCESS,
            payload:data
        }) 
    }catch(error){
        dispatch({
            type:POST_UPLOAD_FAILURE,
            payload:error
        })
    }
}

in this is where i call my actions, in my home screen

export default function Home({ match }) {

  const keyword = match.params.keyword
  const pageNumber = match.params.pageNumber || 1

  const dispatch = useDispatch()
  const allPosts = useSelector(state => state.allPosts)
  const {
    isLoading,
    error,
    posts,
    page,
    pages
  } = allPosts
  useEffect(() => {
    dispatch(listPosts(keyword, pageNumber))
  }, [dispatch, keyword, pageNumber])
}

this is what morgan returns

console output

0 Answers
Related