在组件上渲染获取的 Api 数据

Question

我正在尝试渲染工作卡组件，我从 api 获取数据，我想在另一个组件上显示该卡，它的数据显示，当我从工作卡组件检查时，它在我的控制台上获取，通过我确实显示在搜索结果组件上，我检查了搜索结果的长度，这是我想要渲染组件的位置，它显示 0。我不知道问题出在哪里或是什么，没有错误可以看到我可以从哪里跟踪它。使用 vite 编写应用程序。

import PropTypes from "prop-types";
import JobCard from "./JobCard";

const SearchResults = ({ jobResults }) => {
  console.log("Job Results Length:", jobResults.length);

  return (
    <div>
      <h2 className="text-2xl font-semibold text-light">Search Results</h2>
      {jobResults.length > 0 &&
        jobResults.map((job, index) => <JobCard key={index} job={job} />)}
    </div>
  );
};

SearchResults.propTypes = {
  jobResults: PropTypes.arrayOf(
    PropTypes.shape({
      job_id: PropTypes.string,
      job_title: PropTypes.string,
      job_description: PropTypes.string,
      employer_name: PropTypes.string,
      job_employment_type: PropTypes.string,
      job_apply_link: PropTypes.string,
      job_city: PropTypes.string,
      job_state: PropTypes.string,
      job_country: PropTypes.string,
      job_is_remote: PropTypes.bool,
      job_posted_at_datetime_utc: PropTypes.string,
      job_required_experience: PropTypes.string,
    })
  ),
};

export default SearchResults;

获取 API 组件

import { useState } from "react";
import { fetchJobs } from "../services/jobService";

const Searchbar = () => {
  const [query, setQuery] = useState("");

  const handleSearch = async () => {
    try {
      const jobResults = await fetchJobs(query);

      if (jobResults.status === "OK") {
        const relevantJobs = jobResults.data || [];
        console.log("Relevant Jobs:", relevantJobs);

        
      } else {
        console.error("Error response from server:", jobResults.status);
        
      }
    } catch (error) {
      console.error("Error in handleSearch:", error);
      
    }
  };

  return (
    <div className="relative flex lg:flex-row flex-col flex-1 lg:bottom-20 lg:w-[70%] bg-white p-5  shadow-xl rounded-md ">
      <input
        type="text"
        placeholder="Search a Job Ex: Python developer in Texas, USA"
        onChange={(e) => setQuery(e.target.value)}
        className="border p-2 lg:w-[80%] pl-4 outline-none text-secondary lg:text-sm lg:rounded-l-lg "
      />

      <button
        onClick={() => handleSearch(query)}
        className="bg-primary hover:opacity-90 lg:mt-0 mt-5 text-white lg:text-[15px] lg:rounded-r-lg  lg:p-2 p-4 font-bold lg:ml-10 lg:px-10"
      >
        Search
      </button>
    </div>
  );
};

export default Searchbar;

Answer 1

错误在于您存储作业的方式。您需要将获取的作业存储在一个状态中。将此状态作为 prop 传递给

SearchResults

组件。

以下是您需要在

SearchBar

组件中进行的更改：

// Previous code
  const [jobs, setJobs] = useState([]); // add a state to store the search results

  const handleSearch = async () => {
    try {
      const jobResults = await fetchJobs(query);

      if (jobResults.status === "OK") {
        const relevantJobs = jobResults.data || [];
        setJobs(relevantJobs); // Store the filtered results in the state
        console.log("Relevant Jobs:", relevantJobs);

        
      } else {
        console.error("Error response from server:", jobResults.status);
        
      }
    } catch (error) {
      console.error("Error in handleSearch:", error);
      
    }
  };

现在通过将此状态作为 prop 传递来调用

SearchResults

组件：

<SearchResults jobResults={jobs} />