React TypeScript中如何向Context内的数组添加元素？

1. 调整Context类型定义 #

首先更新SearchContextType，让它同时包含全局搜索结果数组和更新方法，确保其他组件能读取、修改这个全局状态：

import { createContext } from "react";

// 根据你的实际Post结构调整类型
export type Post = {
  id: number;
  title: string;
  // 其他字段...
};

export type SearchContextType = {
  searchPosts: Post[];
  setSearchPosts: (posts: Post[]) => void;
};

export const SearchContext = createContext<SearchContextType>(null!);

2. 完善SearchProvider实现 #

在Provider中维护全局状态，并把状态和更新方法传入Context的value，让所有子组件都能访问：

import React, { useState } from "react";
import { SearchContext, Post } from "./SearchContext";

export const SearchProvider = ({ children }: { children: React.ReactNode }) => {
    const [searchPosts, setSearchPosts] = useState<Post[]>([]);

    return (
        <SearchContext.Provider value={{ searchPosts, setSearchPosts }}>
            {children}
        </SearchContext.Provider>
    );
};

注意：将children类型改为React.ReactNode，支持多子元素场景。

3. 在搜索组件中使用Context更新全局状态 #

移除组件内的局部searchPost状态，直接调用Context的更新方法同步搜索结果到全局：

import { useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useApi } from "./path-to-useApi";
import { SearchContext } from "./SearchContext";

const SearchComponent = () => {
  const navigate = useNavigate();
  const api = useApi();
  const { setSearchPosts } = useContext(SearchContext);
  const [searchText, setSearchText] = useState('');

  const handleSearch = async () => {
    const posts = await api.getAllPosts();
    const filteredPosts = posts.filter(post => 
      post.title.toLowerCase().includes(searchText.toLowerCase())
    );
    // 同步结果到全局Context
    setSearchPosts(filteredPosts);
    // 如需跳转搜索结果页，可在此添加navigate逻辑
    // navigate('/search-results');
  };

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
        placeholder="搜索文章..."
      />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
};

export default SearchComponent;

4. 在其他组件中读取全局搜索状态 #

比如在搜索结果页组件中，直接通过Context获取全局状态并渲染：

import { useContext } from "react";
import { SearchContext } from "./SearchContext";

const SearchResultsComponent = () => {
  const { searchPosts } = useContext(SearchContext);

  return (
    <div>
      <h2>搜索结果 ({searchPosts.length} 条)</h2>
      <ul>
        {searchPosts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchResultsComponent;

可选：把搜索逻辑封装到Provider内 #

如果希望把API请求逻辑统一放到Provider中，可修改Provider代码：

// 在SearchProvider中添加searchPost方法
const searchPost = async (text: string) => {
  const posts = await api.getAllPosts();
  const filteredPosts = posts.filter(post => 
    post.title.toLowerCase().includes(text.toLowerCase())
  );
  setSearchPosts(filteredPosts);
};

// 把searchPost加入value
return (
  <SearchContext.Provider value={{ searchPosts, searchPost }}>
    {children}
  </SearchContext.Provider>
);

之后组件只需调用searchPost方法即可，无需自己处理API请求。

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