如何使用react recoil存储查询结果？

npm install recoil

import { atom } from 'recoil';

export const searchResultsState = atom({
  key: 'searchResultsState',
  default: [],
});

import { useRecoilState } from 'recoil';
import { searchResultsState } from './atoms';

const SearchResults = () => {
  const [searchResults, setSearchResults] = useRecoilState(searchResultsState);

  const fetchSearchResults = async () => {
    // 调用 API 进行查询
    const results = await api.fetchSearchResults();

    // 更新 searchResultsState 的值
    setSearchResults(results);
  };

  useEffect(() => {
    fetchSearchResults();
  }, []);

  return (
    // 渲染查询结果
    <div>
      {searchResults.map((result) => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
};

import { useRecoilValue } from 'recoil';
import { searchResultsState } from './atoms';

const SearchResultCount = () => {
  const searchResults = useRecoilValue(searchResultsState);

  return (
    // 渲染查询结果数量
    <div>共找到 {searchResults.length} 条结果</div>
  );
};