在 reactjs TypeError 中出现错误：无法读取未定义的属性（读取“过滤器”）

Question

我正在使用 react js 制作一个工作门户项目，对于 state 管理，我正在使用 Redux。 我试图制作“搜索”组件以从后端获取列出的作业，但收到一个错误，指出过滤方法未定义

这是我的“searchJobs”操作

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);
  }
};

这是我的搜索组件

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;

需要帮助请叫我。

Answer 1

如果响应是数组，也许您可以先确定它，因为如果 object 是数组，则可以调用过滤方法，有关详细信息，您可以通过此链接查看： 未捕获的类型错误：无法读取未定义的属性“过滤器”反应，我希望这对你有帮助，谢谢

Answer 2

我改变了我的“searchjob”动作。

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);
  }

Answer 3

你有没有尝试过？

filteredJobs = await response.data;

可能发生的情况是 axios 返回 promise ，如果您设置了filteredJobs = response.data ，您的代码现在正在遍历undefined的 object 代码，因为您的获取是异步运行的。

我只使用过.fetch ，但如果 axios 返回 promise，那么您将不得不await promise 的访问属性。

如果我错了，我错了，哈哈