我将从 Search 组件转换为应用程序的各种其他组件可以使用的react上下文。
searchcontext.js

import { createContext, useEffect, useContext, useState } from "react";

export const SearchContext = createContext({
  search: "",
  searchResult: [],
  setSearch: () => {}
});

export const useSearch = () => useContext(SearchContext);

const SearchProvider = ({ children }) => {
  const apiKey = "test key";
  const baseUrl = "https://content.guardianapis.com/";

  const [search, setSearch] = useState('');
  const [items, setItems] = useState([]);

  useEffect(() => {
    const searchNews = async () => {
      if (search.length < 3) {
        const news = await fetchNews("news", 15, 1);
        console.log();
        setItems(news.response.results);
        return;
      }
      console.log(search);
      const news = await fetchNews(search, 15, 1);
      setItems(news.response.results);
    };

    const fetchNews = async (section, pageSize, page) => {
      const url = `${baseUrl}${section}?page-size=${pageSize}&page=${page}&api-key=${apiKey}`;
      const news = await fetch(url);
      return await news.json();
    };

    searchNews();
  }, [search]);

  return (
    <SearchContext.Provider
      value={{
        search,
        searchResult: items,
        setSearch: (e) => setSearch(e.target.value)
      }}
    >
      {children}
    </SearchContext.Provider>
  );
};

export default SearchProvider;

在index.js中提供上下文

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import SearchProvider from "./SearchContext";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <SearchProvider>
      <App />
    </SearchProvider>
  </StrictMode>,
  rootElement
);

search.js-设置搜索值

import { useSearch } from "./SearchContext";

const Search = () => {
  const { setSearch } = useSearch();

  return (
    <>
      <input
        type="text"
        name="search"
        placeholder="Enter search term"
        onChange={setSearch}
      />
    </>
  );
};

在任何管线组件中显示搜索值和/或结果。
home.js

import { useSearch } from './SearchContext';

const Home = () => {
  const { search } = useSearch();
  return (
    <>
      <h3>Home page</h3>
      <div>Search value: {search}</div>
    </>
  );
};

演示

更新

如果您想添加一个加载指示器，那么它可能与您之前所做的相同。
添加 isLoading 根据上下文陈述。
设置 isLoading 获取和删除时为true
设置 isLoading 获取完成时为false。
消耗 isLoading 从上下文中陈述。
搜索提供商：

const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
  const searchNews = async () => {
    console.log(search);

    setIsLoading(true); // <-- start loading

    const news = await fetchNews(search.length ? search : "news", 15, 1);

    setItems(news);
    setIsLoading(false); // <-- clear loading
  };

  const fetchNews = async (section, pageSize, page) => {
    const url = `${baseUrl}${section}?page-size=${pageSize}&page=${page}&api-key=${apiKey}`;
    const news = await fetch(url);
    return await news.json();
  };

  searchNews();
}, [search]);

用户界面示例：

const Home = () => {
  const { isLoading, search, searchResult } = useSearch();

  return (
    <>
      <h3>Home page</h3>
      {isLoading ? (
        <h1>LOADING...</h1>
      ) : (
        <div>
          <div>Search value: {search}</div>
          {searchResult..map( ..... )}
        </div>
      )}
    </>
  );
};