SWRでデータフェッチングしつつ、状態管理として利用したいのですが、mutate(状態更新?)の際に画面が変更されると思っておりますが、下記コードで再描画されなくて悩んでおります。
(描画を実現させたく、useSateを仕込んでみました。その場合画面は再描画されますが冗長なステップかと思っております)
SWRの公式サイトにもSWR では、 コンポーネントはデータの更新を継続的かつ自動的に受け取ることができます。 そして、 UI は常に高速でリアクティブなモノになります。とあり、画面が再描画されるものと思っておりますが、SWRの使用方法に誤解があればご指摘頂きたく宜しくお願いします。
JSX
import React, { useState } from 'react'import useSWR from 'swr' const fetcher = (url) => fetch(url).then((res) => res.json()); const App = () => { const { data, error, mutate } = useSWR('https://jsonplaceholder.typicode.com/users', fetcher) //const [ DummyState , setDummyState ] = useState(data) //この状態管理は不要と思っている const update = (id) => { const newData = data.map(e => { if(e.id == id) e.name+=" hoge" return e }) mutate(newData, false) //setDummyState(newData) //状態変化でレンダリングが起きる console.log(newData) } if (error) return <div>failed to load</div> if (!data) return <div>loading...</div> return ( <> {data.map(row => ( <article key={row.id}> <h1>{row.name}</h1> <button onClick={() => update(row.id)}>update</button> </article> ))} </> );}export default App;

0 コメント