2020年04月10日

Firebase☓ReactでTODOリスト作成(Read)

Firebase☓ReactでTODOリスト作成の続き

functions/index.jsを変更してAPIを/getから/listに変更して、todoオブジェクトを平坦化、ローカルのReact AppからアクセスできるようにCROSSの設定を追加します。

exports.list= functions.https.onRequest(async (request, response) => {
const todosSnapshot = await db.collection('todos').get();
const todos = [];
todosSnapshot.forEach(doc => {
todos.push({
...doc.data(),
id: doc.id,
});
});
response.set('Access-Control-Allow-Origin', 'http://localhost:3000'); // localhostを許可
response.set('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS, POST'); // DELETEだけは拒否
response.set('Access-Control-Allow-Headers', 'Content-Type'); // Content-Typeのみを許可
response.send(JSON.stringify(todos));
});


src/App.jsを変更して上で設定したAPIにアクセスして一覧を表示するように変更します。

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

function App() {
const [todos,changeTodos] = useState([]);
useEffect(()=>{
fetchResponse()
},[])

const fetchResponse = () => {
fetch('https://us-central1-react-todo-23957.cloudfunctions.net/list')
.then( res => res.json() )
.then( res => {
changeTodos(res);
})
}

return (
<div className="App">
<ul>
{todos && todos.map((todo,i)=>(
<li key={i}>{todo.title}</li>
))}
</ul>
</div>
);
}

export default App;

posted by ねこまんま at 11:44 | Firebase | 更新情報をチェックする