如何跳转至ListAllCandidate组件并传参？是否需要Redux？

嘿，这个问题我帮不少开发者梳理过，其实不用急着上Redux，咱们根据你的项目复杂度来选最适合的方案：

1. 优先用「状态提升」（最基础、无额外依赖） #

这是React官方推荐的组件间数据传递方案，适合两个组件有共同父组件、层级不深的场景：

实现思路： #

• 找一个共同的父组件（比如叫CandidateDashboard），把「筛选条件」「候选人数组」「加载状态」这些核心状态放在父组件里管理。
• FilterCandidate不用自己调用接口，只负责收集用户输入，然后通过回调props把筛选条件传给父组件。
• 父组件拿到筛选条件后，负责调用接口获取数据，更新自己的状态。
• ListAllCandidate直接接收父组件传递的candidates、pagination等props，渲染列表即可。

代码示例： #

// 父组件 CandidateDashboard.jsx
import { useState, useEffect } from 'react';
import FilterCandidate from './FilterCandidate';
import ListAllCandidate from './ListAllCandidate';

const CandidateDashboard = () => {
  const [filters, setFilters] = useState({ age: '', position: '' });
  const [candidates, setCandidates] = useState([]);
  const [pagination, setPagination] = useState({ page: 1, total: 0 });
  const [isLoading, setIsLoading] = useState(false);

  // 调用接口获取数据
  const fetchCandidates = async () => {
    setIsLoading(true);
    try {
      const res = await fetch(`/api/candidates?age=${filters.age}&page=${pagination.page}`);
      const data = await res.json();
      setCandidates(data.list);
      setPagination({ ...pagination, total: data.total });
    } catch (err) {
      console.error('获取候选人数据失败:', err);
    } finally {
      setIsLoading(false);
    }
  };

  // 初始加载或筛选条件变化时重新获取数据
  useEffect(() => {
    fetchCandidates();
  }, [filters, pagination.page]);

  // 接收Filter组件传来的筛选条件
  const handleFilterChange = (newFilters) => {
    setFilters(newFilters);
    // 筛选变化时重置页码到第一页
    setPagination({ ...pagination, page: 1 });
  };

  return (
    <div>
      <FilterCandidate onFilterChange={handleFilterChange} currentFilters={filters} />
      <ListAllCandidate 
        candidates={candidates} 
        pagination={pagination} 
        isLoading={isLoading}
        onPageChange={(page) => setPagination({ ...pagination, page })}
      />
    </div>
  );
};

// FilterCandidate.jsx
const FilterCandidate = ({ onFilterChange, currentFilters }) => {
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    const newFilters = { ...currentFilters, [name]: value };
    // 可以加防抖，避免频繁调用接口
    onFilterChange(newFilters);
  };

  return (
    <div className="filter-form">
      <input
        type="number"
        name="age"
        placeholder="输入年龄"
        value={currentFilters.age}
        onChange={handleInputChange}
      />
      {/* 其他筛选字段... */}
    </div>
  );
};

2. 用Context API（解决层级过深的prop drilling） #

如果FilterCandidate和ListAllCandidate的层级很深，中间隔了好几层组件，用props层层传递会很麻烦（也就是「prop drilling」），这时候可以用React的Context API来共享状态：

实现思路： #

• 创建一个CandidateContext，把筛选条件、候选数据、更新筛选的方法都放在Context里。
• 在顶层组件用Context.Provider包裹，把状态和方法提供给所有后代组件。
• FilterCandidate通过useContext拿到更新方法，提交筛选时触发接口请求。
• ListAllCandidate通过useContext拿到候选数据，直接渲染。

代码示例： #

// CandidateContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const CandidateContext = createContext();

export const CandidateProvider = ({ children }) => {
  const [filters, setFilters] = useState({ age: '' });
  const [candidates, setCandidates] = useState([]);
  const [pagination, setPagination] = useState({ page: 1, total: 0 });
  const [isLoading, setIsLoading] = useState(false);

  const fetchCandidates = async () => {
    // 和父组件里的接口逻辑一致
    setIsLoading(true);
    try {
      const res = await fetch(`/api/candidates?age=${filters.age}&page=${pagination.page}`);
      const data = await res.json();
      setCandidates(data.list);
      setPagination({ ...pagination, total: data.total });
    } catch (err) {
      console.error('获取候选人数据失败:', err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchCandidates();
  }, [filters, pagination.page]);

  const handleFilterChange = (newFilters) => {
    setFilters(newFilters);
    setPagination({ ...pagination, page: 1 });
  };

  const handlePageChange = (page) => {
    setPagination({ ...pagination, page });
  };

  return (
    <CandidateContext.Provider value={{
      filters,
      candidates,
      pagination,
      isLoading,
      handleFilterChange,
      handlePageChange
    }}>
      {children}
    </CandidateContext.Provider>
  );
};

// 自定义hooks，简化组件内的Context调用
export const useCandidateContext = () => useContext(CandidateContext);

然后在Filter和List组件里直接使用：

// FilterCandidate.jsx
import { useCandidateContext } from './CandidateContext';

const FilterCandidate = () => {
  const { filters, handleFilterChange } = useCandidateContext();
  
  const handleInputChange = (e) => {
    const newFilters = { ...filters, [e.target.name]: e.target.value };
    handleFilterChange(newFilters);
  };

  // 渲染筛选表单...
};

// ListAllCandidate.jsx
import { useCandidateContext } from './CandidateContext';

const ListAllCandidate = () => {
  const { candidates, pagination, isLoading, handlePageChange } = useCandidateContext();
  
  // 渲染候选人列表和分页器...
};

3. 什么时候需要Redux（或其他状态管理库）？ #

Redux这类库适合复杂应用场景：

• 你的应用有很多组件需要共享候选人数据（比如侧边栏、统计面板、详情页都要用到）；
• 有复杂的状态逻辑（比如多维度筛选组合、数据缓存、和其他模块状态联动）；
• 你需要追踪状态变化的历史（方便调试）。

但如果只是FilterCandidate和ListAllCandidate这两个组件之间传递数据，前面两种方案完全足够，没必要引入Redux增加项目复杂度。

内容的提问来源于stack exchange，提问作者Adib Rajiwate