如何使用lunr js和reactjs创建索引？

import React, { useState, useEffect } from 'react';
import lunr from 'lunr';

const SearchComponent = () => {
  const [index, setIndex] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    // 初始化Lunr.js索引
    const initIndex = () => {
      const data = [
        { id: 1, title: 'Example Document 1', content: 'This is the content of document 1.' },
        { id: 2, title: 'Example Document 2', content: 'This is the content of document 2.' },
        // 添加更多文档...
      ];

      const idx = lunr(function () {
        this.ref('id');
        this.field('title');
        this.field('content');

        data.forEach(function (doc) {
          this.add(doc);
        }, this);
      });

      setIndex(idx);
    };

    initIndex();
  }, []);

  const handleSearch = (event) => {
    const searchTerm = event.target.value;
    setSearchTerm(searchTerm);

    if (index) {
      const results = index.search(searchTerm);
      setSearchResults(results);
    }
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} placeholder="Search..." />

      <ul>
        {searchResults.map((result) => (
          <li key={result.ref}>
            <h3>{data[result.ref].title}</h3>
            <p>{data[result.ref].content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default SearchComponent;