React.js 使用 Dexie 从 IndexedDB 读取数据并创建新数据

在 React 中使用 Dexie 来读取 IndexedDB 中的 exams，如果不存在则创建一个 exam，如果存在则读取出来的代码如下所示：

首先，安装 Dexie：

npm install dexie --save

然后，在 React 组件中引入 Dexie：

import React, { useEffect, useState } from 'react';
import Dexie from 'dexie';

const YourComponent = ({ examId }) => {
  const [exam, setExam] = useState(null);

  useEffect(() => {
    // 创建或打开名为 myDatabase 的数据库
    const db = new Dexie('myDatabase');
    db.version(1).stores({
      exams: '++id,examId' // 在 exams 表中创建 id 自增的索引和 examId 索引
    });

    // 根据 examId 查询 exam
    db.exams
      .where('examId')
      .equals(examId)
      .first()
      .then((result) => {
        if (result) {
          // 如果存在 exam，则设置 exam 状态为查询结果
          setExam(result);
        } else {
          // 如果不存在 exam，则创建一个新的 exam
          const newExam = {
            examId: examId,
            // 添加其他 exam 属性
          };
          db.exams.add(newExam)
            .then(() => setExam(newExam));
        }
      });
  }, [examId]);

  return (
    <div>
      {/* 展示 exam 数据 */}
      {exam && (
        <div>
          <h1>{exam.examId}</h1>
          {/* 其他 exam 属性 */}
        </div>
      )}
    </div>
  );
};

export default YourComponent;

在上述代码中，我们在组件的 useEffect 钩子中创建或打开名为 myDatabase 的数据库，并定义了一个 exams 表。然后，我们使用 where 方法查询 exams 表中的 examId 等于给定 examId 的记录。如果查询到结果，我们将查询结果设置为 exam 状态。如果没有查询到结果，我们创建一个新的 exam 对象，并使用 add 方法添加到 exams 表中，然后将新的 exam 设置为 exam 状态。

最后，我们在组件中展示 exam 数据。

请注意，上述代码只是一个示例，你需要根据你的实际需求来调整代码。