如何解决IndexedDB-从数据库获取对象并将其存储
我已经创建了一个简单的待办事项列表,并希望将其存储在IndexedDB中。
当存储功能正常运行时,get功能不起作用。
我试图将对象存储在名为arr的变量中并返回它。
我的猜测是,由于IndexedDB是异步工作的,因此该函数不返回任何内容,因为Todo尚未存储在arr中。
有人可以告诉我是否确实如此,如果可以,我该如何解决? 我是一个绝对的初学者,不到一个星期前才开始使用React。
import React,{useState,useEffect} from 'react';
import Todo from './components/Todo'
import Form from './components/Form'
import './index.css';
const DEFAULT_KEY = "default";
const putDatabase = (todo) => {
let request = window.indexedDB.open('Database',1),db,tx,store;
request.onupgradeneeded = (e) => {
let db = request.result,store = db.createObjectStore('todo',{keyPath: 'id'});
}
request.onerror = (e) => { console.log('error' + e.target.errorCode)};
request.onsuccess = (e) => {
db = request.result;
tx = db.transaction('todo','readwrite');
store = tx.objectStore('todo');
db.onerror = (e) => {console.log('error')};
todo = JSON.stringify(todo);
store.put({id: DEFAULT_KEY,value: todo});
tx.oncomplete = () => { db.close() };
}
}
const getDatabase = () => {
let request = window.indexedDB.open('Database',store;
request.onupgradeneeded = (e) => {
let db = request.result,{autoIncrement: true});
}
request.onerror = (e) => {console.log('error' + e.target.errorCode)};
request.onsuccess = (e) => {
db = request.result;
tx = db.transaction('todo','readonly');
store = tx.objectStore('todo');
db.onerror = (e) => {console.log('error')};
let arr = store.get(DEFAULT_KEY);
arr.onsuccess = () => {
//const array = arr.result;
return arr.result.value;
}
tx.oncomplete = () => {db.close()};
}
}
const App = () => {
const [todos,setTodos] = useState([]);
useEffect(() => {
getDatabase();
},[])
const addTodo = text => {
const newTodos = [... todos,{text}];
setTodos(newTodos);
putDatabase(newTodos);
};
function completeTodo(index){
const newTodos = [... todos];
newTodos[index].isCompleted = true;
putDatabase(newTodos);
};
const removeTodo = (index) => {
const newTodos = [...todos];
newTodos.splice(index,1);
setTodos(newTodos);
putDatabase(newTodos);
}
return(
<div className ="app">
<div className="todo-app">
<h1>ToDo's</h1>
{todos.map( (todo,index) => (
<Todo
key = {index}
index={index}
todo = {todo}
completeTodo={completeTodo}
removeTodo={removeTodo}
/>
))}
<Form addTodo={addTodo} />
</div>
</div>
);
}
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。