Getting error in reactjs TypeError: Cannot read properties of undefined (reading 'filter')-CodePudding

I am making a job portal project using react js and for state management I am using Redux . i was trying to make "search" component to get the listed jobs from the backend but getting an error that says the filter method is undefined

Here is my "searchJobs" action

export const searchJobs = (searchkey) => async (dispatch) => {
  try {
    var filteredJobs;
    const { response } = await axios.get(
      "https://ajob-backend.herokuapp.com/api/getalljobs"
    );
    filteredJobs = response;
    if (searchkey) {
      filteredJobs = response.filter((job) => {
        return job.title.toLowerCase().includes(searchkey.toLowerCase());
      });
    }
    dispatch({ type: GET_ALL_JOBS, payload: filteredJobs });
  } catch (error) {
    console.log(error);
  }
};

and here is my search component

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { searchJobs } from "../redux/actions/jobActions";


function Search() {
  const dispatch = useDispatch()
    const [searchkey,setSearchkey]=useState("")
  }
  const searchFinish=()=>{
    dispatch(searchJobs(searchkey))
  }
  return (
       
          <>

                <div className="product-search-container">
               <div className="input-group">
                <div className="form-outline">
                  <input type="search" id="form1" className="form-control"
                   value={searchkey}  
                  onChange={(e)=>{
                    setSearchkey(e.target.value)
                  }}
                   />
                  <label className="form-label" for="form1">
                    Search
                  </label>
                </div>
                <button type="button" className="btn btn-primary" onClick={()=>{
                dispatch(searchJobs(searchkey))
                }}>
                  <i className="fas fa-search"></i>
                </button>
              </div>
          </div>

           </>       
  );
}

export default Search;

let me know if you need anything else.

CodePudding user response：

Maybe you can make sure it first, if the response is an array, because filter method can be called if the object is an array, for the detail maybe you can check via this link: Uncaught TypeError: Cannot read property 'filter' of undefined React, I Hope this will help you, thank you

CodePudding user response：

i changed the my "searchjob" action.

export const searchJobs = (searchkey) => async (dispatch) => {
  try {
    var filteredJobs;
    const  response  = await axios.get(
      "https://ajob-backend.herokuapp.com/api/getalljobs"
    );
    filteredJobs = response.data;
    if (searchkey) {
      filteredJobs = response.data.filter((job) => {
        return job.title.toLowerCase().includes(searchkey.toLowerCase());
      });
    }
    dispatch({ type: GET_ALL_JOBS, payload: filteredJobs });
  } catch (error) {
    console.log(error);
  }

CodePudding user response：

Sorry, i can't comment on your answer, so i post my question, so can you show me the response result from this part of code?

const  response  = await axios.get(
  "https://ajob-backend.herokuapp.com/api/getalljobs"
);