如何将搜索栏结果传递至Home组件进行渲染？

核心思路 #

利用你项目已有的Redux状态管理实现搜索数据的全局共享——将Header中获取的搜索结果存入Redux Store，Home组件直接从Store读取数据渲染，这套逻辑后续可直接复用在其他页面。

步骤1：扩展Redux产品状态与对应Action #

在ProductAction.js中新增搜索相关的action：

// 新增搜索产品的action类型
export const PRODUCT_SEARCH_REQUEST = 'PRODUCT_SEARCH_REQUEST';
export const PRODUCT_SEARCH_SUCCESS = 'PRODUCT_SEARCH_SUCCESS';
export const PRODUCT_SEARCH_FAIL = 'PRODUCT_SEARCH_FAIL';
export const PRODUCT_SEARCH_RESET = 'PRODUCT_SEARCH_RESET';

// 搜索产品的action创建函数
export const searchProducts = (query) => async (dispatch) => {
  try {
    dispatch({ type: PRODUCT_SEARCH_REQUEST });
    const { data } = await axios.get(`/api/search/?search=${query}`);
    dispatch({
      type: PRODUCT_SEARCH_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: PRODUCT_SEARCH_FAIL,
      payload: error.response && error.response.data.message ? error.response.data.message : error.message,
    });
  }
};

// 重置搜索状态（清空搜索框时恢复默认列表）
export const resetSearch = () => (dispatch) => {
  dispatch({ type: PRODUCT_SEARCH_RESET });
};

步骤2：更新ProductReducer #

在ProductReducer.js中处理新增的action类型：

import {
  PRODUCT_LIST_REQUEST,
  PRODUCT_LIST_SUCCESS,
  PRODUCT_LIST_FAIL,
  PRODUCT_SEARCH_REQUEST,
  PRODUCT_SEARCH_SUCCESS,
  PRODUCT_SEARCH_FAIL,
  PRODUCT_SEARCH_RESET,
} from '../constants/productConstants';

export const productListReducer = (state = { products: [] }, action) => {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true, products: [] };
    case PRODUCT_LIST_SUCCESS:
      return { loading: false, products: action.payload };
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload };
    // 搜索状态处理
    case PRODUCT_SEARCH_REQUEST:
      return { ...state, loading: true };
    case PRODUCT_SEARCH_SUCCESS:
      return { loading: false, products: action.payload };
    case PRODUCT_SEARCH_FAIL:
      return { loading: false, error: action.payload };
    case PRODUCT_SEARCH_RESET:
      return { ...state, products: [], error: null };
    default:
      return state;
  }
};

步骤3：修改Header组件，触发搜索Action #

将Header中原生打印结果的逻辑替换为dispatch搜索action：

function Header() {
  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;
  const [items, setItems] = useState("");
  const debounce = useDebounce(items, 500);
  const dispatch = useDispatch();
  const logoutHandler = () => {
    dispatch(logout());
  };

  useEffect(() => {
    if (debounce.trim()) {
      dispatch(searchProducts(debounce));
    } else {
      // 清空搜索框时重置状态，加载默认产品列表
      dispatch(resetSearch());
      dispatch(listProducts());
    }
  }, [debounce, dispatch]);

  return (
    <div>
      <Navbar bg="dark" variant="dark" className="navCustom">
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand>eCommerce</Navbar.Brand>
          </LinkContainer>
          <Form className="d-flex">
            <Form.Control
              type="search"
              placeholder="Search"
              className="me-2"
              aria-label="Search"
              onChange={(e) => {
                setItems(e.target.value);
              }}
            />
            <Button variant="outline-success">Search</Button>
          </Form>
          {/* 此处保留原Header剩余代码（如用户菜单等） */}
        </Container>
      </Navbar>
    </div>
  );
}

步骤4：修改HomeScreen组件，复用Redux数据 #

Home组件无需大幅改动，它原本就从Redux的productList读取数据，搜索结果会直接替换原有产品数组：

function HomeScreen() {
  const dispatch = useDispatch();
  const productList = useSelector((state) => state.productList);
  const { error, loading, products } = productList;

  useEffect(() => {
    // 组件挂载时加载默认产品列表
    dispatch(listProducts());
  }, [dispatch]);

  return (
    <div>
      {/* 根据是否为搜索结果动态修改标题 */}
      <h1 className="text-center">{products.length > 0 && products[0].searchQuery ? '搜索结果' : 'Latest Products'}</h1>
      {loading ? (
        <Loader />
      ) : error ? (
        <Message variant="danger">{error}</Message>
      ) : (
        <Row>
          {products &&
            products.map((product) => (
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} />
              </Col>
            ))}
        </Row>
      )}
    </div>
  );
}

后续扩展说明 #

当前Home页面已实现搜索结果渲染，其他页面要复用该逻辑只需：

• 确保页面从Redux对应数据切片中读取列表数据
• 无需修改Header逻辑，Redux全局状态会自动同步搜索结果

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