2020年04月15日

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

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

POSTのCORSがうまく設定できずに悪戦苦闘
Content-Typeがapplication/x-www-form-urlencodedの場合はうまく言ったのだけどapplication/jsonの場合はCORSのエラーが出てしまう。OPTIONSリクエストの調整がうまくできていないのだろうか。。。

とはいえ検証に時間がかけても解決できないのでパッケージで解決

const cors = require('cors');

exports.post= functions.https.onRequest(async (request, response) => {
return cors()(request, response, () => {
const todo = {
'title': request.body.title,
'comment': request.body.comment,
'checked': false
};
const newTodo = db.collection("todos").doc()
newTodo.set(todo)
response.send("ok1");
})
});


とすると登録ができるようになりました。React側のコードはこれ

function App() {
const [todos,changeTodos] = useState([]);
const [title,changeTitle] = useState("");
const [comment,changeComment] = useState("");
useEffect(()=>{
fetchResponse()
},[])

const fetchResponse = async () => {
const res = await axios.get(PATH + 'list')
changeTodos(res.data);
}

// 新規追加
const addTodo = async () => {
await axios.post(PATH + 'post',{
title,
comment,
checked:false
})
fetchResponse()
changeTodos("")
changeTitle("")
}

return (
<div className="App">
title:<input type="text" value={title} onChange={e => changeTitle(e.currentTarget.value)} /><br />
comment:<input type="text" value={comment} onChange={e => changeComment(e.currentTarget.value)} /><br />
<button onClick={() => addTodo()}>add</button><br />
<ul>
{todos && todos.map((todo,i)=>(
<li key={i}>{todo.title}</li>
))}
</ul>
</div>
);
}


このままだと登録後に取得できるリストが順不同になってしまう
posted by ねこまんま at 00:59 | Firebase | 更新情報をチェックする