React 路由配置：尽管 URL 更新正确，组件仍无法渲染

Question

我的 React 应用程序遇到问题，尽管根据搜索查询正确更新了 URL，但 SearchResults 组件仍无法呈现数据。当我搜索查询（例如，皮肤科医生）时，URL 按预期更新（例如，http://localhost:3000/SearchResults?q=皮肤科医生），但组件不显示任何结果，并且控制台保持为空.

该代码旨在显示获取的结果。但是，尽管 URL 根据所做的查询进行更新，但结果并未显示。我的 React 应用程序使用 React Router 进行导航，并且我有一个 SearchResults 组件，旨在根据 URL 中提供的搜索查询来显示医生详细信息。尽管 URL 根据搜索查询正确更新，但 SearchResults 组件无法呈现医生详细信息，并且控制台中不会出现任何错误或日志。

import React, { useState, useEffect } from "react";
import axios from "axios";
import Layout from "../../components/Layout/Layout";
import { useLocation } from "react-router-dom";

const SearchResults = () => {
  const [doctors, setDoctors] = useState([]);
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const specialization = searchParams.get("q");

  useEffect(() => {
    const fetchDoctors = async () => {
      try {
        const response = await axios.get(`/api/v1/fetch/searchQuery/${specialization}`);
        setDoctors(response.data);
      } catch (error) {
        console.error("Error fetching doctors:", error);
      }
    };

    if (specialization) {
      fetchDoctors();
    }
  }, [specialization]);

  return (
    <Layout title="Search Results">
      <div>
        <h4>Doctor Details</h4>
        <div className="table-container">
          <table className="table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Gender</th>
                <th>Location</th>
                <th>Experience</th>
                <th>Specialization</th>
              </tr>
            </thead>
            <tbody>
              {doctors.map((doctor) => (
                <tr key={doctor._id}>
                  <td>{doctor.name}</td>
                  <td>{doctor.phone}</td>
                  <td>{doctor.gender}</td>
                  <td>{doctor.location}</td>
                  <td>{doctor.experience}</td>
                  <td>{doctor.specialization}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </Layout>
  );
};

export default SearchResults;

Answer 1

React 建议不要从头开始编写自己的数据获取。从版本 6.4开始，数据获取是 React Router 的一部分。

如here所述，您可以使用加载器来获取数据。然后，您可以按照此处所述在组件中使用该数据。

如果您想在遵循该建议之前了解数据获取的基础知识，您可以使用 Chrome 开发工具来检查组件中发生的情况。

• 检查“网络”选项卡以检查从您的 api 获取的内容。
• 下载 React 开发者工具扩展。这将允许您检查组件中的状态。
• 如果所有其他方法都失败了，请将日志记录添加到您的快乐路径中。