时间戳

首页 > 解决方案 > 在 useState Hook 中使用 SWR 数据

javascript - 在 useState Hook 中使用 SWR 数据

问题描述

  const fetcher = (url: string) => fetch(url).then((r) => r.json());

  const { data, error } = useSWR(
    "https://some.com/api",
    fetcher,
  );

有没有办法像这样在 useState 挂钩中添加数据

  const fetcher = (url: string) => fetch(url).then((r) => r.json());

  const { data, error } = useSWR(
    "https://meme-api.herokuapp.com/gimme/5",
    fetcher,
  );

const [memes,setMemes]=useState(data);

因为我想在某个点连接数据以进行无限滚动

标签： javascriptreactjsswr

解决方案

将数据从一个变量传输到另一个变量的最快解决方案是使用useEffect挂钩。更改时data，更新memes.

useEffect(() => { setMemes(data); }, [data])

无限滚动

更好的解决方案是使用 SWR 提供的无限滚动解决方案。您在此处记录了不同的选项。

纯取

在这种情况下，您也可以考虑直接使用 fetch 函数并将数据直接附加到 memes 列表中：

const [ memes, setMemes ] = useState([]);

async function fetchAnotherPage() {
    const data = (await fetch('https://meme-api.herokuapp.com/gimme/5')).json();
    setMemes(value => [...value, ...data.memes]);
}

useEffect(() => fetchAnotherPage(), []);

推荐阅读